CSS ограниченное повторение фона (несколько фоновых изображений) - PullRequest
Новая
       3

CSS ограниченное повторение фона (несколько фоновых изображений)

5 голосов
/ 08 ноября 2011

Я пытаюсь создать крутой фоновый эффект (с альфа-прозрачностью и закругленными углами) для раскрывающегося меню с одной записью CSS.

У меня есть верхняя крышка (180 x 4 px),нижняя крышка (180 x 20px) и повторяющаяся средняя (180 x 2px).

Вот мой существующий соответствующий CSS: 

background-image: url('images/drop_top.png'), url('images/drop_bottom.png'), url('images/drop_middle.png');
background-position:left top, left bottom, 0px 10px;
background-repeat:no-repeat, no-repeat, repeat-y;

Проблема в том, что средняя часть, которая должнабыть расширяемым / наклоняемым повторяется полностью под верхней и нижней крышками - так что мои закругленные углы теперь квадратные, потому что под ними повторяющаяся середина.перекрытие ??

Заранее спасибо!

Ответы [ 2 ]

8 голосов
/ 08 ноября 2011

Background-origin и / или background-clip должны помочь. Просто установите верхнюю и нижнюю границу, равную высоте вашей графики, затем установите drop_middle на background-clip:padding-box

РЕДАКТИРОВАТЬ: Вот полное решение, но для горизонтальной ориентации: http://jsfiddle.net/nGSba/

#box
{
    display: inline-block;
    margin: 1em;
    padding: 9px;
    border-left:9px solid transparent;
    border-right:9px solid transparent;
    background-image: url(http://s11.postimage.org/ufpdknvjz/left.png), 
          url(http://s11.postimage.org/6ng294tj3/right.png),
          url(http://www.css3.info/wp-content/themes/new_css3/img/main.png);
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: left top, right top, left top;
    background-origin: border-box,border-box,padding-box;
    background-clip: border-box,border-box,padding-box;
}

То, что застряло у меня, это transparent на border-color. Фон всегда будет проходить под границей, поэтому если ваша граница сплошная, фон все равно будет невидимым.

0 голосов
/ 08 ноября 2011

Независимо от того, к какому элементу вы применяете изображения, попробуйте сделать следующее (для иллюстрации я приму div): 

div {
    background-image: url('images/drop_top.png'), url('images/drop_bottom.png');
    background-position:left top, left bottom;
    background-repeat:no-repeat, no-repeat;
    position: relative;
}

div:after {
    position: absolute;
    top: 10px ; /* whatever your top image height is */
    bottom: 10px; /* whatever your bottom image height is */
    left: 0;
    right: 0;
    z-index: -1;
    background-image: url('images/drop_middle.png');
    background-position: left top;
    background-repeat: repeat-y;
}
...