Как сделать несколько фоновых изображений CSS. Несколько фоновых картинок

В CSS 2 добавить одновременно два фона к одному элементу нереально, поэтому приходится вкладывать один элемент внутрь другого и для каждого задавать свой собственный фоновый рисунок. Для сложных макетов таких вложений иной раз можно насчитать около десятка. Понятно, что ни к чему хорошему такое нагромождение не приводит, но что делать? Оказывается, есть что! В CSS 3 можно одновременно добавлять несколько фоновых рисунков для любого элемента. Так что берем рисунок блока (рис. 1), режем его на части и начинаем тестировать в браузерах.

Рис. 1. Блок для сайта

Для простоты, ширину блока возьму фиксированного размера, а высота будет тянуться в зависимости от контента. По рисунку хорошо видно верхнюю и нижнюю часть, вырезаю в редакторе и складываю пластами в отдельном файле. Среднюю часть надо выбрать так, чтобы она повторялась без швов по вертикали. Рисунок имеет хорошо выраженный повторяющийся орнамент, так что трудностей с выделением быть не должно. Копирую и вставляю к предыдущим фрагментам. В итоге получится такая картинка (рис. 2).

Рис. 2. Подготовленные изображения

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

Сам фон выводится свойством background , оно же задает и координаты нужного фрагмента. Параметры каждого фона перечисляются через запятую, и в данном случае имеет значение их порядок. Мне требуется, чтобы верхняя и нижняя часть блока не перекрывались, поэтому ставлю их первыми (пример 1).

Пример 1. Несколько фоновых картинок

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Первый фон выводит верхнюю границу блока, второй фон - нижнюю, а третий вертикальные границы.

Проверяем в браузерах. Internet Explorer 8 вообще не вывел никаких рисунков, остальные браузеры (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) отобразили рамку корректно (рис. 3).

Рис. 3. Вид рамки в браузере Safari

С использованием множественных фонов ситуация для разработчиков существенно облегчается, особенно при верстке блоков. Остается только одна мелочь. Надо чтобы браузер IE 6–8 прекратил свое существование.

Рассказывая о свойстве background-image в начале раздела, мы не упомянули об одной особенности: в CSS3 вы можете добавлять несколько фонов для одного элемента, просто перечисляя их через запятую. Особенно это бывает нужно, когда элемент с фоном имеет непостоянную ширину или высоту, и фон должен подстраиваться под его размер.

Как задать несколько фонов в CSS

Мы продемонстрируем вам пример, который вполне может пригодиться на практике. Представим, что нам необходимо поместить блок с текстом в рамку. Рамка представляет собой графический файл в формате PNG:

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

Верхняя часть рамки

Нижняя часть рамки

Середина рамки

Фон с изображением середины рамки мы сделаем повторяющимся по оси Y , тогда как верх и низ рамы не будут дублироваться. Добавим все три фона к элементу, а также запишем другие необходимые стили:

Frame { background-image: url(https://goo.gl/tKyzHt), /* верхняя часть рамки */ url(https://goo.gl/SUKymM), /* нижняя часть рамки */ url(https://goo.gl/Km7HVV); /* середина рамки */ background-position: center top, /* позиция верха рамки */ center bottom, /* позиция низа рамки */ center top; /* позиция середины рамки */ background-repeat: no-repeat, /* верх рамки не повторяется */ no-repeat, /* низ рамки не повторяется */ repeat-y; /* середина рамки повторяется по вертикали */ background-size: contain; /* здесь для всех фонов одинаковое значение */ height: auto; /* высота блока зависит от количества содержимого */ width: 400px; /* ширина блока фиксированная */ padding: 30px; /* внутренние отступы блока */ }

Каждый фон необходимо отделять запятой, и только после последнего ставится точка с запятой, означающая конец объявления. Для удобства и лучшей читабельности кода рекомендуем указывать каждый URL в новой строке.

Фоновые рисунки размещаются по принципу слоев - один под другим. Фон, указанный первым, будет находиться в верхнем слое, второй фон - под первым, третий - под первыми двумя. Именно поэтому мы поместили рисунок с серединой рамки в самый конец - чтобы он не накладывался на верхнюю и нижнюю части.

Далее в коде заданы свойства background-position и background-repeat для каждого фона (соблюдается тот же порядок, в котором расположены фоновые рисунки). Да, вы правильно догадались: если это требуется, то через запятую можно указывать значения и других фоновых свойств. А если вам нужно применить одно значение для всех фонов, вы записываете его, как обычно (в нашем случае это свойство background-size: contain).

Что ж, давайте взглянем на результат:

Как видим, рамка расположилась правильно, и теперь она красиво обрамляет содержимое блока. Что же будет, если мы увеличим количество текста в блоке? Смотрим:

Средняя часть нашей рамки продублировалась по вертикали необходимое количество раз, словно вытягиваясь в длину и подстраиваясь под текст. Это и есть тот эффект, который не удалось бы реализовать, если бы мы использовали цельное изображение рамки. Добавим еще больше текста для наглядности:

Безусловно, несколько фонов можно использовать и для решения других задач. Мы показали лишь один пример из множества. Попробуйте придумать свою ситуацию и попрактиковаться в использовании группы фоновых рисунков.

Использование сокращенной записи

Свойство background также принимает множественные значения. В случае использования нескольких фонов сокращенная запись может оказаться намного более удобной, ведь в ней сложнее запутаться. Давайте переделаем наш код для рамки:

Background: url(https://goo.gl/tKyzHt) center top / contain no-repeat, /* верх рамки */ url(https://goo.gl/SUKymM) center bottom / contain no-repeat, /* низ рамки */ url(https://goo.gl/Km7HVV) center top / contain repeat-y; /* середина рамки */

Такой вариант выглядит менее громоздко и легче воспринимается.

Использование псевдо-элементов CSS 2.1 дает возможность задействовать 3 уровня для фона, 2 изображения с фиксированными размерами и множественные сложные обводки для одного элемента HTML. Данный метод существенно расширяет возможности оформления веб страниц для всех браузеров, которые поддерживают псевдо-элементы CSS 2.1 с позиционированием. Поддержка CSS3 не требуется.

По существу, создание псевдо-элементов CSS (:before и:after) и работа с ними похожа на то, как организуется работа с вложенными элементами HTML внутри целевого элемента. Но с одним существенным преимуществом - все производится вне семантики, без использования вложенных элементов HTML.

Для организации множественных фонов и/или обводок псевдо-элементы сдвигаются за контент и прикрепляются в нужной точке элемента HTML с помощью абсолютного позиционирования.

Псевдо-элемент не содержит реального контента и позиционируется абсолютно. Таким образом, он может быть растянут над любой областью "родительского" элемента без влияния на контент. Для этого можно использовать комбинацию свойств top , right , bottom , left , width и height .

Какие эффекты можно получить?

Используя только один элемент можно получить параллакс, множественные фоны (как цвета, так и изображения), обрезанные фоновые изображения, замещение изображений, расширяемые элементы с изображениями в качестве обводки, гибкие искусственные колонки, изображения, выступающие за границы элемента, множественные обводки и другие популярные эффекты, для которых обычно используются теги изображения и/или дополнительная разметка HTML.

На демонстрационных страницах можно увидеть воплощение нескольких популярных эффектов оформления веб страниц с помощью данной техники.

В дополнение, можно использовать изменение стилей для:hover, чтобы получить более сложные эффекты.

Пример кода: множественные изображения для фона

С помощью данной техники можно воспроизвести эффект параллакса с множественными изображениями для фона (такой используется на сайте Silverback), задействовав при этом только один HTML элемент.

Элемент получает свой собственный фон и нужные отступы. Относительное позиционирование элемента действует как точка отсчета при абсолютном позиционировании псевдо-элементов. Положительное значение z-index позволяет корректировать положение псевдо-элементов по оси z.

#silverback { position:relative; z-index:1; min-width:200px; min-height:200px; padding:120px 200px 50px; background:#d3ff99 url(vines-back.png) -10% 0 repeat-x; }

Оба псевдо-элемента позиционируются абсолютно и размещаются по сторонам элемента. Значение z-index равное -1 размещает псевдо-элемент позади слоя контента . Таким образом, псевдо-элементы располагаются поверх фона элемента и его обводки, но весь контент остается доступным для выделения и воспринимает нажатия кнопки мыши.

#silverback:before, #silverback:after { position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; padding-top:100px; }

Каждый псевдо-элемент имеет повторяющийся набор фоновых изображений. Для воспроизведения эффекта параллакса больше ничего не нужно.

Свойство content позволяет добавлять изображение как генерированный контент. Имея два псевдо элемента можно добавить 2 дополнительных изображения к элементу. Они могут быть грубо позиционированы в псевдо-элементах с помощью других свойств, таких как text-align и padding .

#silverback:before { content:url(gorilla-1.png); padding-left:3%; text-align:left; background:transparent url(vines-mid.png) 300% 0 repeat-x; } #silverback:after { content:url(gorilla-2.png); padding-right:3%; text-align:right; background:transparent url(vines-front.png) 70% 0 repeat-x; }

Пример кода: гибкие искусственные колонки

Другим применением описываемой техники является создание гибких колонок равной высоты без использования изображений или дополнительных связанных элементов.

Разметка HTML очень проста. Используем классы для каждого элемента div вместо селекторов CSS 2.1, которые не поддерживаются IE6. Если нет необходимости поддерживать IE6, то можно использовать селекторы.

Контейнер имеет ширину, заданную в процентах, относительное позиционирование и положительное значение свойства z-index . Использование overflow:hidden позволяет элементу переносить на другую строку контент своих плавающих потомков и скрывает выступающие псевдо-элементы. Цвет фона обеспечивает цвет для одной из колонок.

#faux { position:relative; z-index:1; width:80%; margin:0 auto; overflow:hidden; background:#ffaf00; }

Использование относительного позиционирования для элементов-потомков div , позволяет управлять порядком колонок независимо от их следования в исходной разметке.

#faux div { position:relative; float:left; width:30%; } #faux .main {left:35%} #faux .supp1 {left:-28.5%} #faux .supp2 {left:8.5%}

Две другие колонки создаются с помощью псевдо-элементов с фонами. В качестве фонов можно использовать изображения, если нужно.

#faux:before, #faux:after { content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:33.333%; background:#f9b6ff; } #faux:after { left:66.667%; background:#79daff; }

Пример кода: множественная обводка

Множественная обводка организуется почти таким же способом. Ее использование позволяет отказаться от изображений при сохранении эффекта.

Элемент должен иметь относительное позиционирование и достаточной ширины отступ, чтобы содержать дополнительную обводку, которая будет создаваться псевдо-элементами.

#borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600; }

Псевдо-элемент позиционируется на соответствующей дистанции от границы элемента, помещается под слой контента с помощью отрицательного значения свойства z-index , и ему назначаются обводка и фон такие, какие нужно.

#borders:before { content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929; } #borders:after { content:""; position:absolute; z-index:-1; top:15px; left:15px; right:15px; bottom:15px; border:5px solid #00b4ff; background:#fff; }

Прогрессивные усовершенствованиям и устаревшие браузеры

IE6 и IE7не поддерживают псевдо-элементы CSS 2.1 и игнорируют все объявления:before и:after . Они не будут выводить все усовершенствования, но сохранят основу функционирования.

Внимание при использовании Firefox 3.0

Firefox 3.0 поддерживает псевдо-элементы CSS 2.1, но не поддерживает их позиционирование. Из-за такой частичной поддержки эффекты, которые явно зависят от свойств псевдо-элементов width или height, могут выглядеть ужасно. Нет никакого альтернативного способа для Firefox 3.0, если вы использовали свойства width или height . Иногда некоторые улучшения можно получить при добавлении display:block к стилям псевдо-элемента.

Прежде, чем использовать техники, которые требуют позиционирования псевдо-элементов с помощью свойств width или height, нужно рассмотреть, насколько важно обеспечивать поддержку Firefox 3.0, и процент ваших пользователей, которые используют данный браузер.

Данная проблема полностью решается в приложениях, которые используют абсолютное позиционирование, вместо свойств width или height.

Усовершенствования с помощью CSS3

Все примеры, которые реализованы в данной статье, могут быть улучшены с использованием CSS3.

Использование свойств border-radius , rgba , transforms и множественные фоны CSS3 в сочетании с псевдо-элементами могут открыть возможности для реализации более сложных эффектов. Однако, на текущий момент нет браузеров, которые поддерживают анимации или трансформации CSS3 для псевдо-элементов.

Будущее: псевдо-элементы CSS3

Предполагаемые усовершенствования псевдо-элементов в CSS3 (смотри документ CSS3 Generated and Replaced Content Module) включают связанные псевдо-элементы (::before::before), множественные псевдо-элементы (::after(2)), оборачивающие псевдо-элементы (::outside) и возможность вставлять псевдо-элементы для подгружаемых частей документа (::alternate).

Такие изменения откроют практически неограниченные возможности для создания всех видов эффектов с помощью всего лишь одного элемента и набора псевдо-элементов.

Новый способ: множественные фоны на CSS3

Я использую четыре полупрозрачных PNG-изображения, чтобы создать космический фон, используемый на сайте с Луной. Все они накладываются на элементbody , одно поверх другого, чтобы создавать ощущение пространства, когда пользователь меняет размеры окна браузера.

На рис. 5.03 показаны все используемые изображения:

1) облака пыли (clouds.png);

2) сине-розовый градиент (space-bg.png);

3) звездный слой (stars-1.png);

4) еще один слой случайно разбросанных звезд (stars-2.png).

Рис. 5.03. Четыре полупрозрачных фоновых PNG-изображения, которые расположены на фоне сайта с Луной

Синтаксис множественного фона

Поставить эти четыре изображения в качестве фона элемента body очень просто с использованием нового синтаксиса CSS3:

body { background:

Д. Сидерхолм. «CSS3 для веб-дизайнеров»

Четыре изображения наслаиваются – облака в самый низ, звезды на самый верх – в виде списка, разделенного запятыми (обратите внимание, что перечисление начинается с того изображения, которое «ближе» к пользователю). Каждое изображение дублируется по горизонтали, и им выставлены различные положения по горизонтали (используя положительные и отрицательные значения), чтобы каждый слой двигался со своей скоростью, когда меняется размер окна браузера. Наконец, их положение на странице зафиксировано с помощью значения fixed .

Почти черный цвет #1a1a1a добавлен отдельным правилом background-color в самом конце.

Это все (рис. 5.04 ). Замечательно, что удалось обойтись без лишней разметки. Все эти изображения выставляются на элементbody , так что они будут находиться позади содержимого страницы, но нам не потребовалось обертывать их в лишние вспомогательные слои.

Рис. 5.04. Четыре PNG-изображения наслоены одно поверх другого, равно как и темно– серый цвет фона

Поддержка в браузерах

Как упоминалось в первой главе, множественные фоны поддерживаются в Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ и IE9 Beta. Так что они находятся наравне с многими другими CSS-свойствами, которыми мы пользовались в этой книге.

Мы выбрали использовать эту замечательную возможность CSS3 в некритичной части дизайна из-за несовершенной поддержки: чтобы улучшить фон страницы, чтобы создать новое взаимодействие при изменении размеров окна – эффект параллакса для тех, кто может испытать его.

Запасной вариант для всех браузеров

Браузеры, которые пока что не поддерживают множественные фоны, проигнорируют свойство background целиком. Вот почему мы определили свойствоbackgroundcolor отдельно.

Д. Сидерхолм. «CSS3 для веб-дизайнеров»

На рис. 5.05 показано, как сайт выглядит в IE7: множественные фоны игнорируются, и отображается только темно-серый фон, заданный свойством background-color .

Рис. 5.05. IE7 игнорирует свойство, в котором определены множественные фоны, и показывает только темно-серый фон, заданный свойством background-color

Конечно, все работает должным образом, но то, что объемный фон потерялся, нехорошо. Решение заключается в том, чтобы сначала задать единый запасной фон – для браузеров (таких, как IE7 и 8), которые не поддерживают множественные фоны. Затем можно снова объявить это свойство – на этот раз с множественными фонами (IE проигнорирует его).

background: url(../img/space-bg.png) repeat-x fixed -80% 0;background:

url(../img/stars-1.png) repeat-x fixed -130% 0, url(../img/stars-2.png) repeat-x fixed 40% 0, url(../img/space-bg.png) repeat-x fixed -80% 0, url(../img/clouds.png) repeat-x fixed 100% 0; background-color: #1a1a1a;

Для запасного варианта с одной картинкой можно выбрать одно из изображений, которые используются во множественном объявлении, а можно пойти дальше и создать одну картинку, в которой объединялись бы все четыре изображения.

Для сайта с Луной я решил использовать space-bg.png – цветной градиент (рис. 5.06 ), таким образом показывая вариант фона без звезд и облаков в тех браузерах, которые пока что не поддерживают множественные фоны. Очень уместно.

Д. Сидерхолм. «CSS3 для веб-дизайнеров»

Рис. 5.06. Благодаря запасному варианту картинки на фоне в IE7 частично восстановлено ощущение пространства