CSS Background Shorthand - Скорочена властивість
CSS Background Shorthand - Скорочена властивість
Щоб скоротити код, також можна вказати всі властивості фону в одній єдиній властивості. Вона називається скороченою властивістю.
Замість того, щоб писати:
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 | Визначає розмір фонового зображення (зображень) |
