Как дать левое и правое отступы/поля повторяющемуся фону в множественном фоне 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
покажи какой-нибудь код, товарищ. 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, почему бы не поиграть с такими вещами, как радиус границы? Помимо этого, я предлагаю дать нам представление о том, чего вы пытаетесь достичь, и дать нам jsfiddle или живую демонстрацию того, что на самом деле происходит.

person Shauna    schedule 05.05.2011