css властивість background-color
Властивість background-color встановлює колір тла елемента, або його прозорість.
Тло елемента включає в себе загальний розмір елемента, відступи padding та кордони border, але без поля margin.
Властивість background-color не успадковує своє значення батьківського елементу, через те що початкове значення є прозорим, саме тому колір тла нащадків збігається з кольором тла батька.
Колір тла можна задати за допомогою імені кольору:
background: white;
Або за допомогою шістнадцятирічного значення:
background-color: #89b45a;
Чи через RGB та RGBa моделей:
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.8);
Ну і через модель hsl чи hsla:
background: hsl(170, 50%, 45%);
background: hsla(170, 50%, 45%, 1);
Використовуй тандем з властивостей background-colorта text-color, щоб полегшити читачеві сприймання тексту.
Синтаксис
background-color: color|transparent|initial|inherit;Властивість background-color може отримувати 5 значень:
colorКолір тла.
transparentВказує, що колір фону повинен бути прозорим. Без задання
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).
unsetКомбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.
| Значення без задання: | transparent |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.backgroundColor="#00FF00" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| background-color | 1.0 |
4.0 |
1.0 |
1.0 |
3.5 |
| Переглядач | |||
|---|---|---|---|
| background-color | 1.0 |
1.0 |
1.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Приклад поведінки цієї властивості і її успадковування
Синтаксис властивості
.box {
background-color: #4f4f4f;
}