CSS-свойство background-color CSS устанавливает цвет фона элемента, принимая либо цветовое значение, либо специальное значение transparent.

/* Словесные значения */
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.0 - полностью прозрачный */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
background-color: rgba(117, 190, 218, 1.0); /* 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;
Начальное значениеtransparent
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Отображениевизуальный
Обработка значениявычисленный цвет
Animation typeцвет
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

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

Значения

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

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

<color>

где
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <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>? )

где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Примеры

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

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

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

.examplethree {
  background-color: #777799;
  color: #FFFFFF;
}

Результат

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Определение 'background-color' в этой спецификации.
Кандидат в рекомендации Хотя и убирается значение transparent, это ничего не меняет, так как оно было принято как верное значение <color>
CSS Level 2 (Revision 1)
Определение 'background-color' в этой спецификации.
Рекомендация Нет изменений
CSS Level 1
Определение 'background-color' в этой спецификации.
Рекомендация Изначальное определение

Совместимость

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1121413.51
Alpha channel for hex values52 Нет Нет Нет Нет Нет
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка Да Да Да4 Да Да Да
Alpha channel for hex values5252 Нет Нет Нет Нет6.0

1. In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements.

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

Метки документа и участники

Внесли вклад в эту страницу: TaraZingo, SnejUgal
Обновлялась последний раз: TaraZingo,