Background в CSS3

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

В этой статье я хочу рассмотреть свойства background, которые станут доступны с введением стандарта CSS3.

Изменение: Вставка нескольких фонов

В CCS3 стало возможным вставлять несколько фоновых изображений. Синтаксис такой же, как и в CCS2, однако изображения нужно разделять запятой. Изображение, указанное первым, будет самым верхним. Остальные слоями ложатся под предыдущие. Естественно, вы можете пользоваться свойством background-position.

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

Новое свойство: background-origin

Это свойство определяет границу, от которой будет вестись отсчет для background-position.

Значения:

• border-box — отсчет будет вестись от границы блока;
• padding-box (по-умолчанию) — отсчет будет вестить от края внутренней границы;
• content-box — отсчет будет вестить от края содержимого.

Браузеры на движках Gecko (напр. Mozilla Firefox) и Webkit (Safari) используют устаревшую версию спецификации, поэтому значения свойства в них имеют вид, соответственно, border, padding и content.

Если Вы хотите уже сейчас использовать данное свойство в Mozilla Firefox или Safari, то указывайте название свойства:

-moz-background-origin: /* для Mozilla Firefox */
-webkit-background-origin: /* для Safari */

Свойство background-clip позволяет ограничить область заливки фоном. Рассмотрим варианты его применения.

Значения:

• border-box (по-умолчанию) — фон размещается под блоком, включая границу блока;
• padding-box — фон ограничен внутренним отступом;
• content-box — фон ограничен содержимым;
• no-clip — то же самое, что и border-box.

Браузеры на движках Gecko (напр. Mozilla Firefox) и Webkit (Safari) используют устаревшую версию спецификации, поэтому значения свойства в них имеют вид, соответственно, border, padding и content.

Если Вы хотите уже сейчас использовать данное свойство в Mozilla Firefox или Safari, то указывайте название свойства:

-moz-background-clip: /* для Mozilla Firefox */
-webkit-background-clip: /* для Safari */

Поясню рисунок. Здесь зеленым цветом залита область родительского блока, а красным — область блока, ограниченного пунктирной границей.

Новое свойство: background-size

Это свойство позволяет изменить размер исходного фонового изображения.

Значения:

• contain — размер изображения будет уменьшен по размеру блока, соотношение сторон изображения сохранится;
• cover — размер изображения будет увеличен по размеру блока, соотношение сторон изображения сохранится;
• <значение>px <значение>px — размер фона изменится согласно указанным значениям ширины и высоты, используются стандартные ед. изм.;
• <значение>% <значение>% — размер фона изменится согласно указанным значениям ширины и высоты, значение процентов будет рассчитано относительно размеров блока.
• auto (по-умолчанию) — принимается исходный размер изображения, либо, если указано для какой-то одной из сторон, вычисляется относительно размера второй стороны и соотношения сторон (ratio).

Негативные значения невозможны. Возможно значение 0 (ноль), однако тогда изображение показано не будет, и примет значение «transparent».

Новое свойство: background-break

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

Значения:

• bounding-box — блоки будут объединены в прямоугольную область с общей областью позиционирования и заполнения фоном;
• each-box — заполнение фоном будет выполнено индивидуально для каждого блока;
• continuous (по-умолчанию) — заполнение фоном будет выполнено так, как будто между блоками нет разрыва.

Изменение: background-color

В CCS3 свойство background-color получило небольшое улучшение. В дополнение к основному цвету фона, вы можете через слеш указать, так называемый, «запасной цвет». Он будет показан в случае, если фон нижележащего слоя не может быть показан. Если цвет перед слешем не указан, то он будет считаться прозрачным (transparent).

background-color: #000 / #FFF;

Изменение: background-repeat

Обычно в CSS2 повторяющаяся фоновая картинка, доходя до края элемента, обрезается. В CSS3 добавлено два новых значения, которые позволяют убрать этот дефект.

Значения:

• space — фоновое изображение будет размещено по элементу и равномерно заполнено пустым пространством;
• round — фоновое изображение будет уменьшено, чтобы поместиться в объем элемента.

Изменения: background-attachment

Для свойства background-attachment добавилось новое значение local. C этим свойством, в случае если для элемента установлено overflow: scroll, фоновая картинка также будет прокручиваться.

background-attachment: local;

Эта статья начинает цикл о нововведениях, которые ждут нас с введением CSS3. Буду рад ответить на ваши вопросы в комментариях.

Подписывайтесь на RSS и следите за обновлениями.