Как задать для документа более одного фонового изображения
Несмотря на наличие в спецификации CSS2 возможности применения к документу более одного фонового изображения, в действительности ее поддержка реализована в единственном броузере – Safari от Apple. Что же делать при возникновении необходимости в одновременном ис- пользовании двух изображений – допустим, одно используется для за- полнения всей области, а другое отображается статично?
Решение
Имитировать эффект использования нескольких фоновых изображе- ний можно путем их задания для разных вложенных элементов, каки- ми являются, например, html и body:
chapter03/backgrounds4.css (фрагмент)
html {
background-image: url(background-repeatx.jpg);
background-repeat: repeat-x;
background-color: #D2D7E4;
}
body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
background-image: url(recipes.gif); background-repeat: no-repeat; background-position: 98% 2%;
margin: 0;
padding: 46px 0 0 0;
}
Результат применения данных правил показан на рис. 3.13.
Рис. 3.13. Добавление фоновых изображений для элементов html и body
Обсуждение
Такой простой пример может послужить основой для создания более сложных эффектов с использованием нескольких фоновых изображе- ний. Как вы уже могли убедиться на представленных в данной книге
примерах, фоновое изображение можно задать для любого элемента страницы. Внимательный и творческий подход к применению изобра- жений позволит создать множество интересных визуальных решений, не влияющих на доступность документа (поскольку фоновые изображе- ния не связаны со структурой документа).
Многие из предлагаемых на сайте CSS Zen Garden решений основаны именно на такого рода игре с фоновыми изображениями.1
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
