css властивість background-color


Властивість background-color встановлює колір тла елемента, або його прозорість.

Тло елемента включає в себе загальний розмір елемента, відступи padding та кордони border, але без поля margin.

Властивість `background-color`

Властивість 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; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів