background-color

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Свойство background-color CSS задаёт цвет фона элемента.

Попробуйте

Синтаксис

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */

/* RGB value */
background-color: rgb(255 255 128); /* Fully opaque */
background-color: rgb(117 190 218 / 50%); /* 50% transparent */

/* HSL value */
background-color: hsl(50 33% 25%); /* Fully opaque */
background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
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.66px и жирный шрифт или больше, или 24px и более.

Формальное определение

Начальное значение	`transparent`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Вычисленное значение	вычисленный цвет
Тип анимации	цвет

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

background-color = 
  <color>

Примеры

Окрашивание блоков

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

HTML

<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="example-three">Lorem ipsum dolor sit amet, consectetuer</div>

CSS

.example-one {
  background-color: transparent;
}

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

.example-three {
  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;
}

Результат

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

Спецификация
CSS Модуль фона и границ 3 уровня # background-color

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`background-color`	1	12	1	3.5	1	18	4	14	1	1.0	4.4

См. также

Несколько фонов
Тип данных <color>
Другие свойства, связанные с цветом: color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color и column-rule-color

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-color