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

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

CSS свойство background-color определяет цвет фона элемента. При начальном background-clip: border-box фон элемента представляет из себя общий размер элемента, включающий значения padding (внутренние отступы элемента) и border (границы), но не включая значение свойства margin (внешние отступы элемента). Значение цвета допускается указывать как в шестнадцатиричной системе, так и в системах RGB, RGBA, HSL, HSLA, так и с помощью предопределенных цветов. Также доступны hwb(), lab(), lch(), oklab(), oklch() и другие цветовые функции. Цвет рисуется под всеми фоновыми изображениями; прозрачный фон не означает наследование цвета.

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

• "Учебник HTML 5. Статья 'HTML Цвета'."
• "Учебник CSS 3. Статья 'Цветовое оформление в CSS'."

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

<div class="demo-target">
  <strong>Карточка</strong>
  <p>Текст помогает увидеть цвет и фон элемента.</p>
</div>

.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;
}

.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: #ffe4bd;
}

.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: #d9edcf;
}

.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: transparent;
}

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

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

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

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.background-color

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
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 синтаксис:

background-color: <color>;

/* Глобальные значения */
background-color: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. <color> — CSS-цвет, включая transparent, currentColor, HEX и цветовые функции.

JavaScript синтаксис:

element.style.backgroundColor = "#00FF00";

Начальное значение свойства

transparent.

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

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

CSS Backgrounds and Borders Module Level 3.

Наследуется

Нет.

Анимируемое

Да, по вычисленному значению: промежуточные значения цвета рассчитываются плавно.

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

* {
    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;
}

<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>

.sample {
    background-color: #8cc8ee;
}
.second {
    background-color: rgb(140 200 238 / 0.4);
}