Несколько фоновых рисунков
Опубликовано:
Фоновые рисунки довольно часто применяются в вёрстке сайтов и оформлении элементов из-за своих широких возможностей по настройке. Вместе с тем правило, что для каждого элемента может быть только один фон порождало сложные вложенные конструкции, цель которых лишь в добавлении пустых элементов с фоновым рисунком. Гораздо проще использовать один элемент и установить для него необходимое количество фоновых изображений, перечисляя их через запятую.
Давайте рассмотрим пример, когда на веб-странице используется два вертикальных фона. Раньше для этой задачи фоновый рисунок добавлялся к селектору body и html, при этом ещё и надо установить высоту страницы 100%. Теперь гораздо проще, добавляем фоновые рисунки только к селектору body, как показано в примере 1.
Пример 1. Фон на веб-странице
HTML5CSS3IE 8IE 9Cr 13Op 11Sa 5Fx 7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Двойной фон</title>
<style>
body {
background: url(images/pattern-left.png) repeat-y,
url(images/pattern-right.png) 100% 0 repeat-y;
margin: 10px 100px;
}
</style>
</head>
<body>
<p>Типичная европейская буржуазность и добропорядочность
изящно иллюстрирует официальный язык.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Веб-страница с двумя фоновыми картинками
Двойной фон не обязательно использовать исключительно с изображениями, это можно сделать и с градиентами. Разумеется, эффект будет заметен только при прозрачном или полупрозрачном цвете. В примере 2 применяется свойство linear-gradient с префиксами для разных браузеров. Первый фон располагается под углом 45º и состоит из прозрачной и полупрозрачной зелёной полосы. Второй фон содержит те же самые цвета, но располагается под углом -45º. За счёт наложения одного фона на другой по центру веб-страницы появляется цепочка повёрнутых квадратиков.
Пример 2. Градиенты в качестве фона
HTML5CSS3IE 9IE 10Cr 13Op 11Sa 5.1Fx 7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Градиент</title>
<style>
body {
/* Для Firefox 3.6+ */
background: -moz-linear-gradient(45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2)),
-moz-linear-gradient(-45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2));
/* Для Opera 11.10+ */
background: -o-linear-gradient(45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2)),
-o-linear-gradient(-45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2));
/* Для Safari 5.1 и Chrome 10+ */
background: -webkit-linear-gradient(45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2)),
-webkit-linear-gradient(-45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2));
/* Для IE 10 */
background: -ms-linear-gradient(45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2)),
-ms-linear-gradient(-45deg, transparent 50%, rgba(0,186,0,0.2) 50%, rgba(0,186,0,0.2));
}
</style>
</head>
<body>
<p>Типичная европейская буржуазность и добропорядочность
изящно иллюстрирует официальный язык.</p>
</body>
</html>Результат данного примера показан на рис. 2.
Рис.2. Веб-страница с двумя градиентами
Другие статьи по теме
В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.
Как добавить два фоновых изображения к одному элементу?
Фоновые картинки достаточно активно используются для создания блоков, поскольку с их помощью формируется самый причудливый дизайн. В частности, можно добавлять к элементу скругленные уголки, декоративные вертикальные и горизонтальные линии, а также многое другое.
Как добавить две фоновые картинки на веб-страницу?
Добавление одновременно двух фоновых изображений обычно продиктовано дизайном веб-страницы. При этом, как правило, один фон повторяется по горизонтали или вертикали, а второй фон выводится без всякого повторения. Впрочем, подобные детали зависят целиком и полностью от воли дизайнера, поэтому рассмотрим универсальную технологию добавления двух фоновых картинок.