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 значень:

unset

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

автор: Svitlana

правити

color

Колір тла.

автор: Svitlana

правити

transparent

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	3.5	12	4

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

Переглядач
	4.4	18	4	1

Приклади

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

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

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

<div class="pair">
    <div class="card alpha">background-color: rgb(0 0 0 / 25%)</div>
    <div class="card faded">background-color: #000 + opacity: 0.25</div>
</div>

.pair {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: repeating-linear-gradient(45deg, #fff 0 10px, #e6e6e6 10px 20px);
}

.card {
    flex: 1;
    padding: 1.5rem;
    color: #000;
    font-weight: bold;
}

.alpha {
    background-color: rgb(0 0 0 / 25%);
}

.faded {
    background-color: #000;
    opacity: 0.25;
}

<p>Натисни на екран, щоб змінити фон.</p>

* {
	padding: 0;
	margin: 0;
}
	
body {
	height: 100vh;
	display: grid;
	user-select: none;
	align-items: center;
	justify-content: center;
}

p {
	font-size: 24px;
	font-family: monospace;
	line-height: 1;
	font-weight: 700;
	text-shadow: 1px 1px 0px #4f4f4f;
}

window.onclick = function () {
  randomColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
  document.body.style.background = randomColor;
};
//# sourceURL=pen.js

<code>background-color: #252525;</code>

<div class="box">
	<code>background-color: #F74C32;</code>
</div>

<div class="info">
	<code>background-color: #4B4CFF;</code>
</div>

body {
	background-color: #252525;
	font-size: 19px;
	font-family: monospace;
	color: #fff;
}

.box,
.info {
	width: 50vw;
	line-height: 75px;
	padding: 16px;
	margin-top: 36px;
}

.box {
	background-color: #F74C32;
	float: right;
}

.info {
	background-color: #4B4CFF;
	float: left;
}

<div>
    <p>Як бачимо, цей нащадок має колір тла <strong>transparent</strong>, тобто прозорий, він встановлюється за замовчуванням. Тому ми бачимо колір тла батьківського <strong>body</strong>.</p>
  </div>
  <div class="solid">
    <p>Тут ми вже встановили свій колір тла...</p>
  </div>
  <div class="alfa">
    <p>А для цього блоку в якості кольору тла встановленне rgba-значення, що додає невелику прозорість.</p>
  </div>

body {
  background-color: #a6903d;
  line-height: 1.45;
}

div {
  width: 450px;
  margin: 25px auto;
  padding: 12px;
  border: 1px solid #1D212D;
}

.solid {
  background-color: #1D212D;
  color: #fff;
}

.alfa {
  background-color: rgba(0, 0, 0, .45);
  color: #fff;
}