CSS Background - Сокращенное свойство
CSS background - Сокращенное свойство
Чтобы сократить код, также можно указать все свойства фона в одном единственном свойстве. Это называется сокращенным свойством.
Вместо того, чтобы писать:
body {
background-color: #fff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Вы можете использовать сокращенное свойство background:
Пример
Используйте сокращенное свойство, чтобы установить свойства фона в одном объявлении:
body {
background: #fff url("../images/img_tree.png") no-repeat right top;
}
Попробуйте сами »
При использовании сокращенного свойства порядок значений свойств следующий:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Не имеет значения, отсутствует ли одно из значений свойств, если остальные находятся в этом порядке. Обратите внимание, что мы не используем свойство background-attachment в приведенных выше примерах, так как оно не имеет значения.
Проверьте себя с помощью упражнений!
Все CSS свойства фона
| Свойство | Описание |
|---|---|
| background | Устанавливает все свойства фона в одном объявлении |
| background-attachment | Устанавливает, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы |
| background-clip | Определяет область рисования фона |
| background-color | Устанавливает цвет фона элемента |
| background-image | Устанавливает фоновое изображение для элемента |
| background-origin | Определяет, где расположены фоновые изображения. |
| background-position | Устанавливает начальную позицию фонового изображения |
| background-repeat | Устанавливает, как будет повторяться фоновое изображение |
| background-size | Определяет размер фонового изображения (изображений) |
