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 пікселів або більше.

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

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

<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;
}

Результат

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

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

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
background-color
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
footnote
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0

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