Background в CSS3

Опубликовано: 01.09.2018

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

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

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

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

Всё о фонах в CSS 3 - 100% Информации!

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 и следите за обновлениями.