css3 несколько фоновых изображений - путаница с ограничением позиционирования

Question

В CSS нам всегда удавалось использовать идею блочных моделей для создания целого эффекта «сверху-середины (мозаика) -дно» для таких вещей, как границы, закругленные углы и т. Д. Например ..

#top { background-image: url('some-top-image.jpeg'); }
#middle { background-image: url('some-middle-image-that-tiles.jpeg') repeat-y; }
#bottom { background-image: url('some-bottom-image.jpeg'); }

<div id="top"></div>
<div id="middle"><!-- tons of content here --></div>
<div id="bottom"></div>

Не совсем верный код, но в любом случае он иллюстрирует концепцию.

Мне было интересно, есть ли способ внедрить такую ​​логику в новую способность CSS3 создавать несколько фоновых изображений в одном стиле. Такой, что ..

.content {
   background: 
           // top image - top positioning
           // middle image - tiling, offset from top
           // bottom image - bottom positioning
}
<div class="content"><!-- Lots of Content --></div>

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

Answer 1

Укажите верхнее и нижнее изображения и их положения, а затем среднее:

.content {
    background: url('some-top-image.jpeg') top no-repeat, 
                url('some-bottom-image.jpeg') bottom no-repeat, 
                url('some-middle-image-that-tiles.jpeg') repeat-y;
}

Среднее мозаичное изображение объявляется последним, так что верхнее и нижнее изображения будут размещены поверх него.Наслоение нескольких фоновых изображений осуществляется сверху вниз.Подробнее см. §3.1. Создание нескольких фоновых изображений модуля Backgrounds and Borders.