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

Колір тла.

автор: Svitlana

правити

transparent

Вказує, що колір фону повинен бути прозорим. Без задання

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена).

автор: Svitlana

правити

unset

Комбінація ключових слів initial і inherit. Встановлює значення властивості як inherit, якщо властивість успадковується від свого батька, в іншому випадку значення встановлюється як initial.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
background-color	1.0	1.0	1.0	3.5	4.0

Підтримка: мобільні переглядачі

Переглядач
background-color	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">Тло цього блока — темно-сірий #4f4f4f.</div>

.box {
    background-color: #4f4f4f;
    color: #fff;
    padding: 12px;
}