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

CSS свойство background-color устанавливает цвет фона элемента. Фон элемента совпадает с общим размером элемента, включая отступ и границу (без внешнего отступа).

Для установления цвета фона необходимо выбрать какой-либо цвет. Вы можете выбрать цвет из нашего инструмента Color Picker. Цвет может быть обозначен следующими способами: название цвета-"red" HEX значение -"#ff0000" и RGB значение-"rgb(255,0,0)".

Необходимо убедиться, что контрастность цвета фона и цвета текста, расположенного не нем, достаточна высока, чтобы люди с плохим зрением смогли прочесть контент страницы.

Значение по умолчанию transparent
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Нет
Анимируемое Да. Цвет фона анимируем.
Версия CSS1
DOM синтаксис object.style.backgroundColor = "#FFFFFF";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-color</h2>
    <p>Здесь установлено свойство background-color со значением hex.</p>
  </body>
</html>
Можно установить hexadecimal, RGB, RGBA, HSL, HSLA или название цвета как значение для свойства background-color. Узнать больше о HTML Colors.

Рассмотрим пример со значением transparent:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background-color</h2>
    <p>В данном примере установлено значение transparent для background-color. Является значением по умолчанию.</p>
  </body>
</html>

В следующем примере можно увидеть анимируемую версию:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background-color: #eee;
      animation: mymove 5s infinite; 
      }
      @keyframes mymove {
      30% {background-color: #1c87c9;}
      }
    </style>
  </head>
  <body>
    <h2> Анимация свойства background-color</h2>
    <p>В данном примере постепенно меняется цвет фона с серого в синий и снова в серый.
    <p> 
  </body>
</html>

Значения

Значение Описание
transparent Это значение по умолчанию. Устанавливает transparent для цвета фона. Это означает, что нет фонового цвета.
color Устанавливает цвет фона. Могут быть использованы названия цветов, цветовые коды hexadecimal, rgb(), rgba(), hsl(), hsla().
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

What does the CSS 'background-color' property do?
Считаете ли это полезным?