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	Значение элемента наследуется от родительского элемента.