background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

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

background-color: brown;

background-color: #74992e;

background-color: rgb(255, 255, 128);

background-color: rgba(255, 255, 128, 0.5);

background-color: hsl(50, 33%, 25%);

background-color: hsla(50, 33%, 25%, 0.75);

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

Синтаксис

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>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div><div>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 и больше с обычным начертанием.

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

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

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