Нередко заказчики просят создать веб-страницу, вверху которой будет фоновое изображение, отличающееся от того, что расположено внизу. Или, возможно, разные изображения для верха и низа области содержимого в рамках страницы. Это требование кажется таким простым, что по вполне понятным причинам можно предположить, что его удастся выполнить с помощью CSS. Однако при использовании версии CSS 2.1 решение подобной задачи обычно требовало дополнительной разметки. Например, вот как я всегда выполнял такое требование до появления CSS3:
<body class="headerBackgroundHere">
<div class="footerBackground">
<div id="container">
<header>
// Здесь будет содержимое верхнего колонтитула </header>
<div id="main" role="main">
// Здесь будет основное содержимое </div>
<footer>
// Здесь будет содержимое нижнего колонтитула </footer>
</div>
</div> <! — конец. footerBackground —>
</body>
Заметьте, что контейнер всего содержимого (здесь это <div> с идентификатором container), в свою очередь, заключен в элемент <div> с классом footerBackground. В данной ситуации мы можем нацелить CSS-правило для задания фонового изображения для верха страницы в теге <body>:
Body {
Background-image: url ("…/img/topSlice. png"); background-repeat: repeat-x;
}
А затем еще одно правило, но уже для footerBackground. Здесь мы разместим нужное изображение для низа страницы.
. footerBackground {
Background-image: url ("…/img/bottomSlice. png"); background-repeat: repeat-x; background-position: bottom;
}
Подобная методика хорошо и последовательно работает в большинстве браузеров. Однако я никогда не был сторонником использования дополнительной разметки всего лишь для решения проблем, связанных с внешним видом.
К счастью, эту задачу легко решить с помощью CSS3, поскольку в новой версии можно задавать множественные фоновые изображения для того или иного элемента (часть CSS Backgrounds and Borders Module Level 3). Они хорошо поддерживаются браузерами, примечательным исключением среди которых является Internet Explorer версии 8 и ниже. Вот синтаксис:
Background:
Url(‘…/img/1. png’),
Url(‘…/img/2. png’),
Url(‘…/img/3. png’);
Как и в случае с порядком расположения множественных теней, изображение, указанное первым, будет ближайшим к «верхушке» в браузере. Если пожелаете, можете добавить значение общего цвета фона в то же объявление, как показано далее:
Background:
Url(‘…/img/1. png’), url (‘…/img/2. png’), url (‘…/img/3. png’) left bottom, black;
Значение цвета указывайте последним, чтобы оно шло после всех изображений, перечисленных выше.
Браузеры, которые не смогут понять правило для задания множественных фоновых изображений (например, Internet Explorer версии 8 и ниже), будут полностью игнорировать его. Возможно, вы захотите объявить «обычное» свойство background непосредственно перед таким CSS3-правилом в качестве резервного варианта для устаревших браузеров.
Если вы задействуете PHGфайлы с прозрачностью, то через все частично прозрачные фоновые изображения, размещенные одно над другим, будут просматриваться рисунки, расположенные ниже. Однако не обязательно, чтобы фоновые изображения размещались одно над другим и все были одинакового размера.
Размеры фоновых изображений.
Для задания размеров для каждого изображения применяйте свойство background-size. При использовании множественных фоновых изображений соответствующий синтаксис будет выглядеть так:
Background-size: 100% 50%, 300px 400px, auto;
Значения размеров (сначала ширины, а затем высоты) для каждого изображения объявляются, разделяются запятыми в том порядке, в каком они указаны в свойстве background. Как и в приведенном выше примере, вы можете использовать значения в процентах или пикселах для каждого изображения наряду со следующим:
auto — задает для элемента его исходные размеры;
cover — растягивает изображение с сохранением соотношения его сторон, чтобы покрыть область соответствующего элемента;
contain — растягивает изображение, подгоняя его самую длинную сторону под размеры элемента, в котором оно находится, сохраняя соотношение сторон рисунка.
Позиционирование фоновых изображений.
CSS3 позволяет также указать разные позиции для различных изображений. Для этого мы могли бы изменить наше правило следующим образом:
Background:
Url(‘…/img/1. png’) center, url (‘…/img/2. png’), url (‘…/img/3. png’) left bottom, black;
Там, где позиция не объявляется, например, для второго изображения, по умолчанию будет устанавливаться месторасположение вверху слева.
Сокращенный способ определения фона.
Есть сокращенный способ комбинирования свойств, связанных с фоновыми изображениями. Однако по своему опыту могу сказать, что он дает изменчивые результаты. По этой причине я склонен использовать обычный способ, объявляя сначала множественные изображения, затем размеры, а после этого позиции.
ПРИМЕЧАНИЕ.
Прочесть документацию W3C, касающуюся множественных фоновых элементов, можно по адресу http://www.w3.org/TR/css3-background/#layering.
О задании размеров для фоновых изображений можно прочесть здесь: http://www.w3.org/TR/ css3-background/#the-background-size.
О позиционировании фоновых изображений вы прочтете по адресу http://www.w3.org/TR/ css3-background/#the-background-position.
Добавить комментарий