Как да дам ляво и дясно подплънка/поле на повтарящ се фон в css3 множествен фон?

Това, което искам да направя, е точно същото като в тази статия

http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/

Но в моя случай лявото и дясното изображение са прозрачни. така че повтарящият се фон се повтаря в целия елемент. Има ли някакъв начин да се даде пространство отдясно и отляво?

HTML

<ul>
    <li class="expanding">Went To The Market</li>
</ul>

CSS

li.expanding {
    background: url('left.jpg') top left no-repeat,
        url('right.jpg') top right no-repeat,
        url('middle.jpg') top center repeat-x;
    height: 40px;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 20px;
    float: left;
}

Вижте пример на живо тук: http://css-tricks.com/examples/CSS3-Expanding-Menu/


css background-image css-sprites
person Jitendra Vyas    schedule 05.05.2011    source източник
comment
покажете някакъв код mate. HTML, както и CSS. По-добре да използвате jsfiddle   -  person Jawad    schedule 05.05.2011
comment
Едно от тези свойства може да ви помогне: w3.org/TR/css3-background/ #backgrounds - но в момента не разбирам проблема ви. Може би, ако покажете счупен тестов случай (jsFiddle), бих могъл да го разбера.   -  person thirtydot    schedule 06.05.2011
comment
Имам същия проблем, как го решихте?   -  person Muflix    schedule 12.10.2013
comment
Можете да центрирате изображението и да зададете дясно и ляво поле.   -  person    schedule 03.12.2013

Отговори (2)


arrow_upward
1
arrow_downward

Погледни това:

<html>
<head>
<style type="text/css">
li {
    background: url(http://www.w3schools.com/images/w3css.gif) repeat-x;
    padding:0px 20px;
    outline:1px solid red;
    background-clip:content-box;
}
</style>
</head>
<body>
<ul>
        <li>Went To The Market</li>
</ul>
</body>
</html>

Ако не искате да използвате подложка, можете също да използвате ляво-дясна граница с rgba(0,0,0,0).

За да разберете как работи, посетете: http://www.css3.info/preview/background-origin-and-background-clip/

person kbtz    schedule 06.05.2011

arrow_upward
0
arrow_downward

При множество фонове фоновете са наслоени, така че технически всеки фон заема целия елемент, както е продиктувано от стойността на повторение. Ако имате прозрачни части в един от вашите фонове, тогава фоновете под него ще се показват.

В зависимост от вида, който търсите, ако все пак използвате CSS3 техники, защо не си поиграете с неща като border-radius? Освен това предлагам да ни дадете изображение на това, което се опитвате да постигнете, и да ни дадете jsfiddle или демонстрация на живо за това, което всъщност се случва.

person Shauna    schedule 05.05.2011