background-color

Властивість CSS background-color (колір тла) встановлює колір тла елемента.

Спробуйте його в дії

Синтаксис

/* Значення – ключові слова */
background-color: red;
background-color: indigo;

/* Шістнадцяткові значення */
background-color: #bbff00; /* Цілком непрозорий */
background-color: #bf0; /* Цілком непрозорий, скорочений запис */
background-color: #11ffee00; /* Цілком прозорий */
background-color: #1fe0; /* Цілком прозорий, скорочений запис  */
background-color: #11ffeeff; /* Цілком непрозорий */
background-color: #1fef; /* Цілком непрозорий, скорочений запис  */

/* Значення RGB */
background-color: rgb(255 255 128); /* Цілком непрозорий */
background-color: rgb(117 190 218 / 50%); /* Прозорий на 50% */

/* Значення HSL */
background-color: hsl(50 33% 25%); /* Цілком непрозорий */
background-color: hsl(
  50 33% 25% / 75%
); /* непрозорий на 75%, а отже – прозорий на 25% */

/* Особливі значення – ключові слова */
background-color: currentcolor;
background-color: transparent;

/* Глобальні значення */
background-color: inherit;
background-color: initial;
background-color: revert;
background-color: revert-layer;
background-color: unset;

Властивість background-color приймає значення у вигляді єдиного значення <color>.

Значення

<color>

Однорідний колір тла. Наноситься під сподом будь-яких вказаних background-image; втім, такий колір буде видимим крізь будь-яку прозорість зображення.

Занепокоєння щодо доступності

Важливо пересвідчитись, що співвідношення контрасту між кольором тла та кольором тексту, накладеного на тло, достатньо високе, аби люди зі слабким зором мали змогу прочитати вміст сторінки.

Співвідношення контрасту кольору визначається порівнянням яскравості кольорових значень тексту та тла. Аби відповідати поточним Настановам із доступності вебконтенту (WCAG) (англ.), для звичайного тексту необхідне співвідношення 4.5:1, а для більшого тексту штибу заголовків – 3:1. Великим вважається текст розміру 18.66 пікселів або більше, якщо грубим шрифтом, інакше – 24 пікселів або більше.

• WebAIM: Перевірка контрасту кольору (англ.)
• MDN Розуміння WCAG, Пояснення настанов 1.4
• Розуміння критеріїв успіху 1.4.3 | W3C Розуміння WCAG 2.0 (англ.)

Формальне визначення

Формальний синтаксис

<color>
де 
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
де 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
де 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклади

Розфарбування блоків

Цей приклад демонструє застосування до елементів HTML <div> властивості background-color з використанням різних значень CSS <color>.

HTML

<div class="exampleone">Але щоб ви зрозуміли, звідки</div>

<div class="exampletwo">Але щоб ви зрозуміли, звідки</div>

<div class="examplethree">Але щоб ви зрозуміли, звідки</div>

CSS

.exampleone {
  background-color: transparent;
}

.exampletwo {
  background-color: rgb(153 102 153);
  color: rgb(255 255 204);
}

.examplethree {
  background-color: #777799;
  color: #ffffff;
}

Результат

Розфарбування таблиць

Цей приклад демонструє застосування властивості background-color до елементів HTML <table>, у тому числі рядів <tr> і комірок <td>.

HTML

<table>
  <tr id="r1">
    <td id="c11">11</td>
    <td id="c12">12</td>
    <td id="c13">13</td>
  </tr>
  <tr id="r2">
    <td id="c21">21</td>
    <td id="c22">22</td>
    <td id="c23">23</td>
  </tr>
  <tr id="r3">
    <td id="c31">31</td>
    <td id="c32">32</td>
    <td id="c33">33</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
}
#r1 {
  background-color: lightblue;
}
#c12 {
  background-color: cyan;
}
#r2 {
  background-color: grey;
}
#r3 {
  background-color: olive;
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Множинні фони
• Тип даних <color>
• Інші властивості, пов'язані з кольором: color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color та column-rule-color
• Застосування кольору до елементів HTML за допомогою CSS