Несколько фоновых картинок. Можно ли добавить фоновые изображения спискам

К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background . Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. Все изображения со своими параметрами перечисляются через запятую, при этом вначале указывается картинка которая выводится поверх остальных изображений, а последней, соответственно, самая нижняя картинка. В примере 1 показано создание фона с тремя изображениями.

Пример 1. Три фона

Если требуется отдельно задать какое-то стилевое свойство для фона, вроде background-size как в примере выше, то параметры для каждого фона перечисляются через запятую. Результат данного примера показан на рис. 1.

Рис. 1. Фон с тремя изображениями

Отдельные изображения для фона позволяют менять их положение, а также анимировать, как показано в примере 2.

Пример 2. Анимированный фон

Рассмотрим теперь как применять одну картинку для создания блока с рамкой (рис. 2). Ширина блока фиксированная, а высота тянется в зависимости от объёма содержимого блока.

Рис. 2. Рисованная рамка

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

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

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

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

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

В 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 прекратил свое существование.

• Tutorial

Мы уже ранее затрагивали возможности модуля CSS3 Backgrounds and Borders , рассматривая работу с тенями (). Сегодня мы немного поговорим о еще одной интересной возможности — использовании нескольких изображений в фоне.

Композиция фонов

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

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

Могут быть и другие разумные причины:)

Классический подход

Итак, нам нужно разместить несколько фоновых изображений одно над другим. Как обычно решается эта задача? Очень просто: на каждое фоновое изображение создается блок, которому прописывается соответствующее фоновое изображение. Блоки либо вкладываются друг в друга, либо размещаются подряд с соответствующими правилами позиционирования. Вот простой пример:

Блок с классом «fishing» внутри «mermaid» исключительно для демонстрационных целей.

Теперь немного стилей:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing { height:300px; width:480px; position: relative; } .sample1 .sea { background: url(media/sea.png) repeat-x top left; } .sample1 .mermaid { background: url(media/mermaid.svg) repeat-x bottom left; } .sample1 .fish { background: url(media/fish.svg) no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; } .sample1 .fishing { background: url(media/fishing.svg) no-repeat top right 10px; }

Результат:

В данном примере три вложенных фона и один блок с рыбками, расположенный рядом с «фоновыми» блоками. В теории, рыбок можно перемещать, например, с помощью JavaScript или CSS3 Transitions/Animations.

Кстати, в этом примере для ".fishing" используется новый синтаксис для позиционирования фона , также определенный в CSS3:
background: url(media/fishing.svg) no-repeat top right 10px;
На текущий момент он поддерживается в IE9+ и Opera 11+, но не поддерживается в Firefox 10 и Chrome 16. Так что пользователи последних двух браузов поймать рыбку пока не смогут.

Множественные фоны

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

И соответствующие стили:
.sample2 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, top left; background-repeat: no-repeat, repeat-x, repeat-x ; } .sample2 .fish { background: url("media/fish.svg") no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; }
Для определения множественных изображений необходимо использовать правило background-image, перечисляя отдельные изображения через запятую. Дополнительными правилами, также списком, можно задать позиционирование, повторы и другие параметры для каждого из изображений. Обратите внимание на порядок перечисления изображений: слои перечисляются слева направо от самого верхнего к самом нижнему.

Результат полностью совпадает:

Одним правилом

Если рыбок не нужно выделять в отдельный блок для последующих манипуляций, всю картинку можно переписать одним простым правилом:

Стили:
.sample3 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, 30px 90px, top left; background-repeat: no-repeat, repeat-x ; }

Картинку с результатом приводить не буду — поверьте, она совпадает с двумя картинками выше. А вот на стили обратите внимание еще раз, особенно на «background-repeat» — согласно спецификации, если часть списка в конце пропущена, то браузер должен повторить указанный список нужное число раз, чтобы соответствовать количеству изображений в списке.

В данном случае, это эквивалентно такому описанию:
background-repeat: no-repeat, repeat-x, no-repeat, repeat-x;

Еще короче

Если вы помните CSS 2.1, в нем определена возможность описывать фоновые изображения в краткой форме. Как на счет множественных изображений? Это также возможно:

Sample4 .sea { height:300px; width:480px; position: relative; background: url("media/fishing.svg") top right 10px no-repeat, url("media/mermaid.svg") bottom left repeat-x, url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; }

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

Динамичные изображения

Если композиция статична или динамична не более, чем в зависимости от размеров контейнера, тогда множественные фоны очевидно упрощают конструкцию страницы. А что делать, если с отдельными элементами композиции нужно работать независимо из javascript (перемещать, прокручивать и т.п.)?

Кстати, вот пример из жизни — тема с одуванчиком в Яндексе:


Если вы залезете в код, вы увидите там примерно следующее:

...

Блоки с классами «b-fluff-bg», «b-fluff__cloud» и «b-fluff__item» содержат фоновые изображения, накладывающиеся друг на друга. Причем фон с облаками постоянно прокручивается, а одуванчики летают по экрану.

Можно ли это переписать с использованием множественных фонов? В принципе, да, но при условии 1) поддержки этой возможности в целевых браузерах и… 2) читайте дальше;)

Как добавить динамики множественным фонам? В такой ситуации оказывается удобным, что во внутреннем представлении браузер раскидывает отдельные параметры фоновых изображения по соответствующим правилам. Например, для позиционирования есть «background-position», и для сдвигов достаточно изменять только его. Однако имеется и плата за использование множественных изображений — в этом правиле (и любом аналогичном) необходимо перечислять позицию для всех фонов, заданных для вашего блока, и нельзя сделать это выборочно.

Чтобы добавить нашему фону с рыбками анимации, можно использовать такой код:
$(document).ready(function() { var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; function animationLoop() { fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX < 0) fishesX = 480; mermaidX += 0.5; if(mermaidX > 480) mermaidX = 0; fishY = -10 + (10 * Math.cos(t * 0.091)); fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left"; window.requestAnimFrame(animationLoop); } animationLoop(); });
где
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) { window.setTimeout(callback, 1000 / 60); }); })();

И, кстати, анимации также можно делать через CSS3 Transitions/Animations, но это тема для отдельного обсуждения.

Паралакс и интерактив

Наконец, схожими маневрами можно легко добавить эффекты паралакса или интерактивного взамодействия с фоном:

Множественные фоновые изображения удобны в подобных сценариях, так как пока мы говорим только про фон (а не контент), их использование позволяет избежать замусоривания html-кода и DOM. Но за все приходится платить: я не могу обращаться к отдельным элементам композиции по имени, id, классу или какому либо другому параметру. О порядке элементов в композиции я должен явно помнить в коде и на каждое изменение любого параметра любого элемента фактически я должен склеивать строку, описывающую значения этого параметра для всех элементов, и обновлять ее для всей композиции.

Sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left";

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

Что там с совместимостью?

Все современные версии популярных браузеров, включая IE9+, поддерживают множественные изображения (можно сверяться, например, с сaniuse).

Вы также можете использовать Modernizr , чтобы предоставлять браузерам, не поддерживающим множественные фоны, альтернативные решения. Как написал Chris Coyier в заметке о порядке слоев при использовании множественных фонов , делайте примерно так:

Multiplebgs body { /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ } .no-multiplebgs body { /* laaaaaame fallback */ }
Если вас смущает использование JS для предоставления обратной совместимости, вы можете просто дважды объявить background, правда, это тоже имеет свои минусы в виде возможной двойной загрузки ресурсов (это зависит от реализации обработки css в конкретном браузере):

/* multiple bg fallback */ background: #000 url(...) ...; /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ background url(...), url(...), url(...), #000 url(...);

Если вы уже начали думать о Windows 8 имейте в виду, что вы можете использовать множественные фоны при разработке metro style приложений, так как внутри используется тот же движок, что и в IE10.

P.s. В тему: не могу не вспомнить феноменальную статью про .

Теги:

• css3
• multiple backgrounds
• borders and backgrounds

Добавить метки

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

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

Что такое СSS фоны?

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

Фон элемента описывается согласно блочной модели СSS . Поля (margin) не являются частью фона, но частью фона являются границы (border), подложки (или отступы) (padding) и ширина контента (width).

Существую 5 фоновых свойств, применимых к CSS селектору, 4 из которых применяются к фоновым изображениям:

Фоновый цвет (background-color) - – устанавливает фоновый цвет элемента. Цвету может быть задано значение hex, rgb или одно из ограниченных цветовых имен. Также фоновый цвет может быть задан прозрачным или унаследовать значение родительского элемента. Более подробно в статье Фоновое изображение (background-image) - – устанавливает изображение как фон к элементу, а его значение выглядит как url(«путь-к-изображению»). Свойство background-image может также иметь значения none и inherit . Повтор фона (background-repeat) - – устанавливает повторение фонового изображения. Значения: repeat , no-repeat , repeat-x , repeat-y и inherit . Фоновое приложение (background-attachment) – - устанавливает, как фоновое приложение будет двигаться со страницей. Оно может скроллировать (scroll , при скроллировании страницы движется с элементом, значение по умолчанию), остается фиксированным (fixed , остается фиксированным в случае, когда страница скроллируется) или перенимать (inherit) значение родительского элемента. Позиция фона (background-position) - – устанавливает стартовую позицию фонового изображения в элементе. У свойства background-position два значения, положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom). Позицию фона можно также установить в % от верхнего левого угла элемента.

Сокращение правил СSS относящихся к фону

Можно задавать каждое свойство фона индивидуально, однако на практике это лучше упростить. При этом свойства следует задавать в следующем порядке: цвет, изображение, повтор, приложение, позиция (color, image, repeat, attachment, position).

Div {background: #0088ff, url("path-to-an-image"), repeat-x, scroll, top left}

При таком упрощении не нужно задавать все свойства, но необходимо использовать правильный порядок . Незаданным вами свойствам будут присвоены следующие значения по умолчанию:

• background-color: transparent
• background-image: none
• background-repeat: repeat
• background-attachment: scroll
• background-position: 0% 0%

Пример сокращеной записи показан ниже:

Background: #0077ff background: url("path-to-image") no-repeat background: url("path-to-image") top left

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

Фоновые изображения CSS не являются HTML изображениями

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

Тег img создает новый блок. Фоновое изображение СSS помещается в существующий блок. К фоновому изображению СSS нельзя добавить поля, границу и подложку. Также фоновому изображению CSS нельзя задать ширину и высоту.

Так как изображение в html – это новый блок (встроенный блок, то есть он обтекается другими элементами), у него есть ширина и высота, подложки и поля, а также граница. Более того, к тегу img можно применить фоновое изображение CSS. Не знаю, как часто это применяется на практике, но по желанию за изображение можно добавить фоновое изображение.

Ответы на распространенные вопросы

Хотя фоновое свойство относительно легко в использовании и понимании, работа с ним, тем не менее, может вызвать ряд вопросов.

1. Почему фоновое изображение не отображается?

Обычно это связанно с тем, что элемент не имеет ни ширины, ни высоты. Помните, что фоновое изображение не создает блока, а наполняет существующий. Если этот блок не имеет ни ширины, ни высоты, наполнить попросту нечего. Решением будет придание элементу размеров. Можно задать элементу (не фоновому изображению) высоту и ширину, или же наполнить элемент контентом, где ширина и высота создадутся сами.

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

2. Могу ли я использовать несколько фоновых изображений?

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

Не следует также забывать, что ко всем HTML-элементам можно применить фон. Скажем, у вас есть div , содержащий h2 и параграф. К каждому из них можно применить фоновые изображения и, контролируя другие СSS cвойства, !!!можно добиться нужного!!! эффекта. Можно так же вставить дополнительные div и span внутри и снаружи элемента, что создаст больше элементов, к которым можно добавить фон. Такой подход довольно громоздок, но он работает.

3. Как менять местами фоновые изображения при наведении мышки на элемент?

Существует два способа. Нужно добавить новое правило к элементу с псевдоклассом:hover , чтобы оно указывало (background-image) на новое изображение, либо сделать изображение в виде CSS спрайта и менять его фоновую позицию (background-position), для показа другой части спрайта.

Важно отметить, что старые версии IE не поддерживает псевдокласс:hover естественным путем, поэтому для работы этих способов в IE понадобиться небольшой javascript. Я предпочитаю пользоваться suckerfish solution, этим же решением я пользуюсь для выпадающих вниз меню.

4. Как сделать фоновые изображения прозрачными?

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

5. Можно ли расположить фоновое изображения в таблице, строке таблицы или ячейки таблицы?

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

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

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

.

6. Можно ли добавить фоновое изображение границам?

Пока нет. Это свойство обещают реализовать в СSS3. Если вас не смущает, что оно не будет работать во многих браузерах, то можете воспользоваться им уже сейчас.

7. Можно ли добавить фоновые изображения спискам?

Да. Списки те же html-элементы, поэтому могут принимать фоновые изображения. Фоновое изображение легко можно использовать в качестве буллита (маркера) списка. Думаю трудностей с этим не возникнет.

8. Как добавить отступ фоновому изображению?

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

9. Как выравнить фоновое изображение по правому краю.

Подобно предыдущим вопросам ответ связан с фоновой позицией (background-position). Воспользуйтесь значением right для свойства background-position (background-position:right;) и изображение будет выровнено по правому краю элемента.

10. Почему в напечатанном виде фоновое изображение не отображается?

Контроль над этим свойством отсутствует по весомой причине. Чтобы напечатать изображение, потребуется много чернил, поэтому многие предпочитают не печатать его. Печатать или не печатать изображение устанавливается в браузере индивидуально. Я рекомендую оставить все как есть, однако если решите печатать, то вот способ для обхода запрета на печать фоновых изображений justaddwater.dk/2009/09/29/print-css-background-logo-hack/ .

11. Как растянуть фоновое изображение, чтобы оно соответствовало элементу?

Другим возможным решением служит создание изображения, размеры которого намного больше нужных, и фоновая позиция установлена на 50% 50%. Таким образом, фоновое изображение будет центрировано внутри элемента, а по мере роста ширины элемента все больше изображения становится видно. Изображение при этом будет оставаться центрированным.

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

12. Можно ли обернуть ссылку вокруг фонового изображения?

Нет. Еще раз, фоновые изображения не создают блоки. Решением будет добавление ссылки вокруг всего контента внутри html-элемента или охватывание (обертывание) ссылки вокруг самого элемента. Выбор варианта зависит html-элемента и контента внутри этого элемента.

Заключение

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

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