Как задать левый и правый отступы / отступы для повторяющегося фона в множественном фоне css3? - PullRequest
Новая
       14

Как задать левый и правый отступы / отступы для повторяющегося фона в множественном фоне css3?

4 голосов
/ 05 мая 2011

То, что я хочу сделать, точно так же, как в этой статье

http://css -tricks.com / CSS3-многооконные фоны Obsoletes сдвижного-двери /

Но в моем случае левое и правое изображение прозрачно. так повторяется фон повторяется во всем элементе. Есть ли способ дать правое и левое пространство?

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 /

Ответы [ 2 ]

1 голос
/ 06 мая 2011

Взгляните на это: 

<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/

0 голосов
/ 05 мая 2011

При наличии нескольких фонов фоны являются слоистыми, поэтому технически каждый фон занимает весь элемент, что определяется значением повторения. Если на одном из ваших фонов есть прозрачные части, фоны под ним будут просвечивать.

В зависимости от внешнего вида, если вы все равно используете методы CSS3, почему бы не поиграть с такими вещами, как border-radius? Кроме этого, я предлагаю дать нам представление о том, чего вы пытаетесь достичь, и дать нам jsfiddle или живую демонстрацию того, что на самом деле происходит.

...