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 (англ.)
Формальне визначення
Початкове значення | transparent |
---|---|
Успадковується | ні |
Обчислене значення | computed color |
Формальний синтаксис
<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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
background-color
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | 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 |
Дивіться також
- Множинні фони
- Тип даних
<color>
- Інші властивості, пов'язані з кольором:
color
,border-color
,outline-color
,text-decoration-color
,text-emphasis-color
,text-shadow
,caret-color
таcolumn-rule-color