Свойство CSS background-color
Свойство CSS background-color задаёт цвет фона элемента. Фон охватывает весь размер элемента. Смотрите примеры.
Свойство CSS background-color задаёт цвет фона элемента. Цвет заполняет область содержимого, внутренние отступы (padding) и рамку (border), но не внешний отступ (margin) — поля всегда прозрачны и сквозь них виден фон родительского элемента.
На этой странице рассматриваются синтаксис свойства, допустимые форматы цвета, специальные ключевые слова transparent и initial, анимация цвета между состояниями, а также правило доступности, обеспечивающее читаемость текста.
Как задать цвет фона
Можно передать любое допустимое значение цвета CSS. Наиболее распространённые форматы:
- Именованные цвета —
red,tomato,rebeccapurple. - HEX —
#ff0000(или трёхзначное сокращение#f00), с необязательной альфа-парой#ff000080. - rgb() / rgba() —
rgb(255, 0, 0),rgba(255, 0, 0, 0.5)для частичной прозрачности. - hsl() / hsla() —
hsl(0, 100%, 50%), зачастую удобнее для ручного подбора, чем HEX.
Вы можете визуально подбирать значения с помощью нашего инструмента Color Picker или прочитать полный справочник HTML Colors.
background-color — простейшая часть сокращённого свойства background; если нужен только сплошной цвет, устанавливайте его отдельно, не записывая всё сокращение целиком.
Всегда обеспечивайте достаточный коэффициент контрастности между цветом фона и расположенным поверх него текстом. WCAG требует не менее 4.5:1 для обычного текста (3:1 для крупного), чтобы люди с ослабленным зрением могли читать страницу. При выборе сочетаний тёмного на светлом или светлого на тёмном пользуйтесь инструментом проверки контрастности.
| Начальное значение | transparent |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируемость | Да. Цвет фона можно анимировать. |
| Версия | CSS1 |
| DOM Syntax | object.style.backgroundColor = "#FFFFFF"; |
Синтаксис
Синтаксис свойства CSS background-color
background-color: color | transparent | initial | inherit;Пример свойства background-color:
Пример свойства CSS background-color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #8ebc42;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>Here the background-color is specified with a hex value.</p>
</body>
</html>![Свойство CSS background-color](https://api.w3docs.com/uploads/media/default/0001/03/0e320aa63c591a91d882bbc24e53bcfcffa18142.png "CSS background-color property" =420x)
Использование прозрачности
Любой формат цвета с альфа-каналом позволяет сделать цвет полупрозрачным поверх того, что находится за элементом:
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */
background-color: #0000ff80; /* semi-transparent blue (8-digit hex) */Четвёртое значение (альфа) изменяется от 0 (полностью прозрачный) до 1 (полностью непрозрачный). В отличие от свойства opacity, альфа-цвет фона влияет только на фон — текст и дочерние элементы остаются полностью непрозрачными.
Пример свойства background-color со значением «transparent»:
Пример свойства CSS background-color со значением transparent
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>In this example the background-color is set to transparent. This is the default value.</p>
</body>
</html>Пример анимированного варианта свойства background-color:
Пример свойства CSS background-color с анимацией
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
animation: mymove 5s infinite;
}
@keyframes mymove {
30% {
background-color: #1c87c9;
}
100% {
background-color: #eee;
}
}
</style>
</head>
<body>
<h2> Animation of background-color property</h2>
<p>
In this example it gradually changes the background color from grey to blue, and back to grey.
</p>
</body>
</html>Поскольку background-color поддерживает анимацию, браузер плавно интерполирует между двумя цветами. Аналогично работает и с CSS transitions — например, для плавного изменения фона кнопки при наведении (:hover).
Наследование
background-color не наследуется. Каждый элемент изначально имеет значение transparent, поэтому дочерний элемент не копирует фон родителя — он просто позволяет фону родителя просвечивать сквозь себя, если собственного фона не задано. Именно поэтому установка цвета для <body> как будто «заполняет страницу»: дочерние элементы прозрачны, и цвет body виден позади них.
Поддержка браузерами
background-color включён в спецификацию с CSS1 и поддерживается во всех браузерах, включая все версии Internet Explorer. Единственное более новое дополнение — четырёх- и восьмизначная HEX-нотация с альфа-каналом (#rrggbbaa), которая требует достаточно современного браузера; rgba() и hsla() безопасны везде.
Значения
| Значение | Описание | Пример |
|---|---|---|
| transparent | Значение по умолчанию: фон прозрачный, то есть цвет фона отсутствует. | Play it » |
| color | Задаёт цвет фона. Можно использовать имена цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). | Play it » |
| initial | Устанавливает свойство в значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |