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 / 0.5); /* Прозорий на 50% */

/* Значення HSL */
background-color: hsl(50 33% 25%); /* Цілком непрозорий */
background-color: hsl(
  50 33% 25% / 0.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 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;
}

Результат

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

              <br />
              <small>
                  # background-color
                </small>
            </a>
          </td>
        </tr>
      </tbody>
    </table>