Свойство background
Как я уже упоминала ранее, каждый элемент в дереве документа по факту является прямоугольной коробкой. Каждая из этих коробок имеет фон, который может быть полностью прозрачным, залит сплошным цветом или содержать картинку. Фон регулируется при помощи 8 CSS свойств (плюс один шорткат).
background-color
Свойство background-color задает цвет для фона элемента. Значением может быть любое допустимое значение цвета или ключевое слово transparent.
.left {
background-color: #ffdb3a;
}.middle {
background-color: #67b3dd;
}.right {
background-color: transparent;
}
Цвет фона отрисовывается в той области блока, которая обозначена при помощи свойства background-clip. Если вы так же установите фоновую картинку, то цветной слой отрисуется за ней. В отличии от слоя с изображением, который может содержать несколько картинок, мы можем задать только одно значение для слоя цвета.
background-image
Свойство background-image устанавливает фоновое изображение (или несколько изображений) для элемента. Обычно значением является адрес картинки, который прописывается внутри конструкции url(). Значение none так же может быть использовано. Слой будет учитываться, но он будет пустым.
.left {
background-image: url('ire.png');
}.right {
background-image: none;
}
Мы так же можем указать через запятую несколько фоновых изображений. Каждое последующее изображение будет помещаться за предыдущим.
.middle {
background-image: url('khaled.png'), url('ire.png');
/* Другие стили */
background-repeat: no-repeat;
background-size: 100px;
}
background-repeat
Свойство background-repeat отвечает за “плиточную раскладку” картинки после того, как она приобрела свои конечные размеры (заданные свойством background-size) и была спозиционирована (при помощи background-position).
Значением этого свойства может быть одно из ключевых слов — repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), остальные значения могут быть заданы один раз для обеих осей одновременно или для каждой по отдельности.
.top-outer-left {
background-repeat: repeat-x;
}.top-inner-left {
background-repeat: repeat-y;
}.top-inner-right {
background-repeat: repeat;
}.top-outer-right {
background-repeat: space;
}
.bottom-outer-left {
background-repeat: round;
}.bottom-inner-left {
background-repeat: no-repeat;
}.bottom-inner-right {
background-repeat: space repeat;
}.bottom-outer-right {
background-repeat: round space;
}
background-size
Свойство background-size определяет размер фонового изображения. Значением могут быть ключевые слова, точные размеры или размеры в процентах.
Ключевыми словами являются contain и cover. Ключевое слово contain будет масштабировать изображение до наибольшего размера при условии, когда его ширина или высота могут поместится в пределы области блока. С другой стороны cover масштабирует картинку до минимально возможного размера чтобы закрыть всю область блока.
.left {
background-size: contain;
background-image: url('ire.png');
background-repeat: no-repeat;
}.right {
background-size: cover;
/* Такие же стили как у .left */
}
В случае точных размеров и размеров в процентах мы можем указать значения для ширины и высоты фоновой картинки. Значение в процентах будет рассчитываться от размера элемента.
.left {
background-size: 50px; /* Прочие стили .left */
}.right {
background-size: 50% 80%; /* Прочие стили .left */
}
background-attachment
Свойство background-attachment контролирует, как фоновое изображение будет прокручиваться по отношению к видимой области страницы и элементу. Есть три доступных значения.
Ключевое слово fixed означает, что фоновое изображение фиксируется на экране и не двигается при прокрутке страницы. local означает, что фон закреплен на его позиции в элементе. Если у элемента будет полоса прокрутки, а фоновое изображение находится вверху, при прокрутке элемента вниз фоновое изображение останется вне поля видимости. И наконец, scroll означает, что изображение фона фиксируется и не прокручивается даже если элемент имеет полосу прокрутки.
.left {
background-attachment: fixed;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
overflow: scroll;
}.middle {
background-attachment: local; /* Другие стили как у .left */
}.right {
background-attachment: scroll; /* Другие стили как у .left */
}
background-position
Это свойство, в сочетании со свойством background-origin, определяет, где будет располагаться фоновое изображение. Значением может быть ключевое слово, число или проценты и мы можем указать положение вдоль осей x и y.
Доступные ключевые слова: top, right, bottom, left и center. Мы можем использовать эти ключевые слова в любых комбинациях. Если указано только одно ключевое слово, то второе значение по умолчанию будет center.
.top-left {
background-position: top;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
}.top-middle {
background-position: right; /* Другие стили как у .top-left */
}.top-right {
background-position: bottom; /* Другие стили как у.top-left */
}.bottom-left {
background-position: left; /* Другие стили как у.top-left */
}.bottom-right {
background-position: center; /* Other styles same as .top-left */ }
Для значения в числах или процентах мы можем указать отдельно положение по оси x и оси y. Процентное значение высчитывается по отношению к размерам элемента.
.left {
background-position: 20px 70px; /* Другие свойства как у .top-left */
}.right {
background-position: 50%; /* Другие свойства как у .top-left */
}
background-origin
Свойство background-origin определяет, какая область элемента будет занята фоновым изображением.
Доступны значения: border-box, которое позиционирует изображение по границам область (Border Area), padding-box располагает картинку, используя модель Padding Area и content-box, которое использует модель Content Area.
.left {
background-origin: border-box;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}.middle {
background-origin: padding-box; /* Те же стили, что у .left*/
}.right {
background-origin: content-box; /* Те же стили, что у .left*/
}
background-clip
Свойство background-clip отвечает за то, как фон будет закрашен. Как и свойство background-origin , оно основывается на блочной модели.
.left{
background-clip: border-box;
background-size: 50%;
background-color: #ffdb3a;
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}.middle {
background-clip: padding-box; /* Те же стили, что у.left*/
}.right {
background-clip: content-box; /* Те же стили, что у .left*/
}
background
И, наконец, свойство background является обобщающим для всех перечисленных выше свойств. Порядок перечисления значений не имеет значения, поскольку тип данных разный. Тем не менее, для свойств background-origin и background-clip, если указана только одна блочная модель, то она применяется для обоих свойств. Если указываете два значения, то первое будет присвоено свойству background-origin.
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
Перевод The Background Properties от Ire Aderinokun.
