Page 116 - Сила CSS3 Освой новейший стандарт

116 • Глава 3. Линованная бумага

Каждое изображение можно разместить, повторить, масштабировать и скорректировать
иным образом независимо от остальных. Для этого нужно добавить информацию о на-
стройке отображения к URL-адресу данного изображения в свойстве background или
вставить список разделенных запятой значений в каждое независимое свойство описания
фона, например background-repeat: no-repeat, no-repeat, repeat-x, repeat. Каждое значение в
таком списке сопоставляется с соответствующим пунктом в списке фоновых изображений.
Помимо заполнения бумажного фона многоуровневыми изображениями пятен, возмож-
ность добавления нескольких фоновых изображений помогает решать следующие задачи:
• создание гибких полей с узорными или неправильными углами и краями, которые
невозможно описать с помощью других свойств CSS3, таких как border-radius; напри-
мер добавление на страницу декоративных кнопок (см. http://css-tricks.com/26-css3-
multiple-backgrounds-obsoletes-sliding-doors);
• изображения открывающейся и закрывающейся кавычек для блока blockquote (см.
http://css.dzone.com/news/multiple-backgrounds-oh-what-beautiful-thing);
• эффект параллакса, когда изменение размера окна или наведение указателя мыши
на блок div заставляет изображения двигаться с разными скоростями по отношению
друг к другу (см. http://www.paulrhayes.com/2009-04/auto-scrolling-parallax-effect-
without-javascript);
• заполнение всей ширины поля или страницы единым изображением, которое в дей-
ствительности состоит из множества фрагментов. Например, вам требуется пейзаж,
в котором солнце всегда отображается в правом верхнем углу, а дерево — в левом
нижнем;
• заполнение поля по всей высоте и ширине изображениями с указанием их относи-
тельного местоположения (доля от общей длины или ширины поля) — для того чтобы
картинки находились на расстоянии друг от друга; например, поверх голубого фонового
цвета можно вывести множество изображений облаков;
• имитация реального трехмерного объекта путем добавления в одно поле изображений,
представляющих верхний срез, нескольких промежуточных срезов и нижний срез;
• добавление генерируемого с помощью CSS3 градиента (помните, что он определяется
в свойстве background-image, а не background-color) к фоновому изображению, для того
чтобы постепенно сводить на нет текстуру, размывать края изображения до сплошного
цвета или показывать пользователю только нужные части изображения по мере того,
как он прокручивает страницу (см. http://atomicrobotdesign.com/blog/htmlcss/make-
the-thinkgeek-background-effect-using-css3).

Таблица 3.2. Поддержка нескольких фоновых изображений для одного элемента
в браузерах

IE Firefox Opera Safari Chrome
Да, начиная Да, начиная Да, начиная Да Да
с версии 9 с версии 3.6 с версии 10.5

www.trk.kg