8 свойств Background

8 свойств Background

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

BACKGROUND-COLOR

Свойство background-color устанавливает цвет фона элемента. Оно может принимать цветовые значения либо значение transparent (прозрачный).

Свойство background-color
Цвет фона закрашивает область элемента, указанной в свойстве background-clip. Если на бэкграунд устанавливается также и изображение, то цветовой слой будет находиться под ним. В отличие от фоновой картинки, которых может быть несколько, цветовой слой фона только один.

BACKGROUND-IMAGE

Свойство background-image устанавливает в качестве фона элемента изображение (либо несколько изображений). Значением этого свойства обычно является url(), где в скобках прописывают абсолютный или относительный адрес картинки. Иногда также используется значение none, дабы вернуть свойство к дефолтному состоянию (например, когда мы хотим, чтобы фоновое изображение загружалось на десктопе, но отсутствовало на мобильных устройствах).

Свойство background-image
Также мы можем указать несколько фоновых картинок, разделяя их адреса запятой. При этом каждое следующее изображение будет накладываться под предыдущее.

Свойство background-image

BACKGROUND-REPEAT

Свойство background-repeat управляет тем, как фоновое изображение будет замощено после ресайза (свойство background-size) и позиционирования (свойство background-position).
Значения этого свойства следующие: no-repeat, repeat-x, repeat-y, repeat (по умолчанию), space, round. Замечу, что два последних значения не обрезают изображение при мощении, а либо добавляют пустое пространство между повторениями (space), либо масштабируют картинку (round). Советую поэкспериментировать со всеми значениями. Например, их можно объединять.

Свойство background-repeat
Свойство background-repeat

BACKGROUND-SIZE

Свойство background-size определяет размер фонового изображения. Оно может принимать следующие значения: CSS единицы (пиксели (px), сантиметры (cm), em и др.), проценты и ключевые слова (contain и cover).
Contain будет масштабировать изображение так, чтобы оно хотя бы по одной стороне полностью поместилось в область, при этом часть области может остаться пустой. Cover будет масштабировать изображение так, чтобы оно полностью покрыло пространство, при этом часть изображения может быть за пределами видимости.

Свойство background-size
C помощью CSS единиц и процентов мы можем определить ширину и высоту фонового изображения. Проценты при этом будут считаться от размеров элемента.

Свойство background-size

BACKGROUND-ATTACHMENT

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

  • Fixed – картинка фиксируется относительно вьюпорта при прокрутке страницы.
  • Local – фоновое изображение закреплено относительно содержимого элемента, т.е., если элемент имеет прокрутку, то фон будет скроллиться вместе с ним.
  • Scroll – изображение фиксируется относительно самого элемента и не прокручивается вместе с его содержимым. При этом, если станица имеет прокрутку, то и фон перемещается вместе с элементом.

Свойство background-attachment

BACKGROUND-POSITION

Это свойство в комбинации с background-origin определяет положение фонового изображения. Оно может принимать следующие значения: ключевые слова (top, right, bottom, left и center), проценты, смещения относительно осей x и y, а также смещения относительно сторон элемента.

Свойство background-position
Свойство background-position
Смещения относительно осей x и y задаются следующим образом:

Свойство background-position

BACKGROUND-ORIGIN

Свойство background-origin определяет, каким образом фоновое изображение должно позиционироваться относительно элемента. Может принимать три значения:

  • Border-box – изображение «приклеивается» к верхнему левому углу элемента не зависимо от толщины границы. При этом граница, если она есть, будет проходить поверх фона.
  • Padding-box – аналогично, с той лишь разницей, что толщина границы учитывается и как бы отодвигает фон. (значение по умолчанию)
  • Content-box – изображение позиционируется относительно верхнего левого угла содержимого элемента.

Свойство background-origin

BACKGROUND-CLIP

Это свойство действует аналогично background-origin, в том смысле, что позиционирование происходит относительно тех же точек. Но здесь в отличие от background-origin позиционируется та область фона, которая будет обрезана.

Свойство background-clip

Перевод статьи: https://bitsofco.de/the-background-properties/

Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте

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

Ваш электронный адрес не будет опубликован.Обязательные для заполнения поля отмечены *