MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

background-color

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

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

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

/* Шестнадцатеричное значение с alpha-каналом */
background-color: #11ffee00; /* 00 - fully transparent */
background-color: #11ffeeff; /* ff - fully opaque */

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

/* 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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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
Базовая поддержка1.0121.04.013.51.0
Alpha channel for hex values52.0НетНетНетНетНет
ВозможностьAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Базовая поддержка(Да)(Да)(Да)1.0(Да)(Да)(Да)
Alpha channel for hex values52.052.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.

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

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

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