background-color
================

CSS-свойство **`background-color`** CSS устанавливает цвет фона элемента.

Интерактивный пример
--------------------

Синтаксис
---------


```css
/\* Словесные значения \*/
background-color: red;

/\* Шестнадцатеричное значение \*/
background-color: #bbff00;

/\* Шестнадцатеричное значение с alpha-каналом \*/
background-color: #11ffee00; /\* 00 - полностью прозрачный \*/
background-color: #11ffeeff; /\* ff - непрозрачный \*/

/\* RGB-значение \*/
background-color: rgb(255, 255, 128);

/\* RGBA-значение или RGB с alpha-каналом \*/
background-color: rgba(117, 190, 218, 0); /\* 0.0 - полностью прозрачный \*/
background-color: rgba(117, 190, 218, 0.5); /\* 0.5 - полупрозрачный \*/
background-color: rgba(117, 190, 218, 1); /\* 1.0 - непрозрачный \*/

/\* HSLA-значение \*/
background-color: hsla(50, 33%, 25%, 0.75);

/\* Специальные словесные значения \*/
background-color: currentColor;
background-color: transparent;

/\* Общие значения \*/
background-color: inherit;
background-color: initial;
background-color: unset;
```


Свойство `background-color` определяется единственным значением `<color>`.

### Значения

`<color>`

Является CSS `<color>`, которое описывает цвет фона. Даже если заданы одно или несколько `background-image`, цвет может отрендерится, если изображения прозрачны.

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

background-color =   
  <color>    
  
```

Примеры
-------

### HTML


```html
<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
```

### CSS


```css
.exampleone {
  background-color: teal;
  color: white;
}

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

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

### Результат

Проблемы доступности
--------------------

Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # background-color |

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Множественные фоны
* Тип данных `<color>`
* Другие свойства, связанные с цветом: `color` (en-US), `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), и `column-rule-color`
* Применение цвета к HTML элементам с помощью CSS