Позиционирование нескольких фоновых изображений

У меня есть три фоновых изображения, все шириной 643px. Я хочу, чтобы они были изложены так:

  • верхнее изображение (высота 12px) нет-повторите

  • средние изображения повторить-y

  • Нижний изображения (высота 12px) нет повторения

Я не могу сделать это без их перекрытия (что является проблемой поскольку изображения частично прозрачны), возможно ли что-то подобное?

background-image:    url(top.png),
                     url(bottom.png),
                     url(middle.png);

background-repeat:   no-repeat,
                     no-repeat,
                     repeat-y;

background-position: left 0 top -12px,
                     left 0 bottom -12px,
                     left 0 top 0;
33
background background-image background-position css css3

8 ответов

ваша проблема в том, что repeat-y заполнит всю высоту, независимо от того, где вы расположите его. Таким образом, он перекрывает верх и низ.

одним из решений является нажатие повторяющегося фона в псевдоэлемент, расположенный вне контейнера с помощью 12px вверху и внизу. результат можно посмотреть здесь (непрозрачность в демо-версии-это просто показать, что нет перекрытия). Без непрозрачности,посмотреть здесь. Соответствующие код (протестирован в браузерах CSS3: IE9, FF, Chrome):

в CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

Если вам нужна или нужна поддержка IE8 (которая не поддерживает несколько фонов), вы можете поместить верхний фон в основной div и поместить Нижний фон с помощью div:after псевдо элемент, расположенный в нижней части контейнера.

48

если вы можете добавить заполнение / границы в блок, равный фонам, которые вы хотите разместить, не перекрывая другой блок, вы можете использовать background-clip & background-origin чтобы расположить верхний и Нижний фоны над прокладками / границами и повторяющийся фон над содержимым/прокладками+содержание.

вот пример:http://dabblet.com/gist/2668803

для вашего кода вам, возможно, нужно добавить что-то вроде этого:

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;

или 

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;

и вы получите то, что вам нужно. Если вы не можете получить прокладки/границы, псевдо-элемент, такой как упомянутый Скоттс, будет работать отлично.

6

попробуйте сделать так:

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

изменить: Был просто пример, но вот css с вашим css:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }
1

Я действительно нашел более простое исправление, потому что у меня была такая же проблема с горизонтальной навигацией.

вместо добавления кода как и другие ответы вы просто должны перечислить его в ваш CSS. Центральное изображение, которое повторяется, должно быть указано последним, а не первым или вторым.

в моем коде это выглядит так:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
1

вот метод, который использует 3 div для каждого из Top, средний и дно изображения, которые прозрачны для применения к вашей веб-странице.

фоновые обои не являются обязательными.

протестирован в современных браузерах и в браузерах IE8 дружелюбный.

этот метод позволяет лечить тело элемент, как он должен обрабатываться, т. е. разметка вашей веб-страницы делает не нужно быть в оболочке или содержать элемент.

пример jsFiddle
пример jsFiddle с центрированным заполненным

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

0

единственный (практичный, не угрожающий волосам) способ, который я вижу, - это сделать это в Javascript, когда страница загружена и когда она изменена, с холстом размером, чтобы соответствовать внутренней высоте и 3 изображениям: нарисуйте первый один раз вверху, нарисуйте второй столько раз, сколько требуется, чтобы покрыть оставшуюся часть холста, и нарисуйте третий внизу холста. Поместите холст на 0,0 С до смешного отрицательное значение z-индекса.

Я пошел на это с 3 изображениями (643 x 12, 100 и 12) и, конечно, первая проблема, которую я видел, заключается в том, что 3-е изображение рисуется на части последней итерации 2-го изображения-если у вас нет высоты окна ровно 12+12+(p2.Высота*X), у вас будет некоторое перекрытие. Но ведь это ожидаемо, верно?

0

Я думаю z-index исправит это, потому что z-index влияет только на дочерние элементы, то есть вы не можете испортить что-либо еще на странице, которая использует z-index.

сверху и снизу изображения z-index:3;

средние изображения z-index:2; background-repeat:repeat-y;

0

радикальный, но эффективный способ справиться с этим, если:

  1. вы хотите применить фоны без перекрытия к ": до"
  2. элемент": before " как известная максимальная высота
&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}
0