CSS свойство background-color

Определение и применение

CSS свойство background-color определяет цвет фона элемента. Фон элемента представляет из себя общий размер элемента, включающий значения padding (внутренние отступы элемента) и border (границы), но не включая значение свойства margin (внешние отступы элемента). Значение цвета допускается указывать как в шестнадцатиричной системе, так и в системах RGB, RGBA, HSL, HSLA, так и с помощью предопределенных цветов.

Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:

Попробуйте значения background-color

Меняется только цвет фона. При transparent видна шахматная подложка предпросмотра; текст и рамка остаются непрозрачными.

Значение свойства

background-color: #d9edf8

HTML и CSS примера
HTML
<div class="demo-target">
  <strong>Карточка</strong>
  <p>Текст помогает увидеть цвет и фон элемента.</p>
</div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  background-color: #d9edf8;
}

Поддержка браузерами

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.background-color
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
background-color✓1✓12✓1✓3.5✓1✓18✓4✓14✓1✓1.0✓4.4✓1
currentColor✓1✓12✓1.5✓9.5✓4✓18✓4✓14✓3.2✓1.0✓37✓3.2
transparent✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
background-color: "color | transparent | initial | inherit";

JavaScript синтаксис:

JavaScript
object.style.backgroundColor="#00FF00"

Значения свойства

Значение Описание
color Определяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета").
transparent Указывает, что цвет фона должен быть прозрачным. Значение по умолчанию.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Примеры, попробуйте сами

Цвет и прозрачность

Сравните непрозрачный и полупрозрачный фон поверх клетчатой подложки. Замените цвет второго блока на transparent: фон исчезнет, но текст останется.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: repeating-conic-gradient(#fff 0% 25%, #e1e7ed 0% 50%) 0 / 20px 20px;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
.caption,
.long-text p {
    display: inline-block;
    margin: 8px;
    padding: 4px;
    background: #fff;
    color: #172c3d;
}
.long-text {
    max-width: 160px;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="sample"><span class="caption">Результат</span></div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="sample second"><span class="caption">Результат</span></div>
  </section>
</div>
style.css
CSS
.sample {
    background-color: #8cc8ee;
}
.second {
    background-color: rgb(140 200 238 / 0.4);
}