Главная » 2011 » Сентябрь » 26 » Использование нескольких фоновых изображений с CSS3

Вот простой пример:



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

Вот код для этого:



Как это работает?

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

Указание нескольких фонов с использованием индивидуальных свойств фона

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

Синтаксис:



Примечание: значение 'none' также​ генерирует слой.

Пример:



Запятая также используется для разделения списка других фоновых свойств: background-repeat, background-attachment, background-position, background-clip, background-origin и background-size.

Пример:



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

Если указываются лишние значения для любого из индивидуальных свойств, они игнорируются. Например, если указано четыре значения для свойства background-position, но только три значения указаны для свойства background-image, четвертое значение в списке не будет использоваться.

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

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

Указание нескольких фонов, используя сокращенное свойство "background"

Несколько фонов может также определено с помощью сокращенного свойства background.

Синтаксис:



Примечание: задание цвета фона допускается только в последнем фоновом слое.

Пример:



CSS3 спецификация Backgrounds and Borders предлагает дополнительные разъяснения по синтаксису для background:

Число разделенных запятыми элементов определяет число фоновых слоев. Учитывая действующие правила, для каждого слоя сокращение сначала устанавливает для каждого из свойств ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ начальные значения этого свойства, затем присваивает явные значения, указанные для этого слоя. Наконец, свойство 'background-color' устанавливает заданный цвет, если таковой имеется, иначе устанавливается первоначальное значение.

Если присутствует одно значение , то оно задает значения и "background-origin" и "background-clip". Если два значения присутствуют, то первым устанавливается "background-origin", а вторым "background-clip".

Совместимость с браузерами

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

Firefox поддерживает несколько фонов, начиная с версии 3.6 (Gecko 1.9.2), Safari, начиная с версии 1.3, Chrome, начиная с версии 10, Opera, начиная с версии 10.50 (Presto 2.5) и Internet Explorer, начиная с версии 9.0.

Примеры кросс-браузерности

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

Пример

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



Код для этого примера может быть записан одним из двух способов, либо:

Code

#exampleA {
  width: 500px;
  height: 250px;
  background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
  background-repeat: no-repeat;
  background-position: left top, right bottom, left top;
  }

либо

Code

#exampleA {
  width: 500px;
  height: 250px;
  background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
  }

Пример B

Пример ниже (благодаря Opera) демонстрирует, как несколько фонов может быть использовано для создания техники раздвижных дверей:



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

Code

#exampleB {
  display: inline-block;
  margin: 1em; padding: 1em;
  background-image: url(left.png), url(right.png), url(main.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left top, right top, left top ;
  }

либо

Code

#exampleB {
  width: 500px;
  height: 250px;
  background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x;
  }

Дополнительная информация для дальнейшего чтения

Дополнительную информацию о нескольких фоновых изображениях можно найти в спецификации CSS Backgrounds and Borders Level 3, доступной здесь.

Источник
Перевод и описание: PS-Studio.Info

Всего комментариев: 0

Оставь комментарий первым!

Имя *:
Email:
Все смайлы
Код *: