Свойство 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"; |
Синтаксис
Синтаксис свойства 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>
INFO
В качестве значения свойства background-color можно указать шестнадцатеричный код, RGB, RGBA, HSL, HSLA или название цвета. Подробнее о цветах в HTML.
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */Пример свойства 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>Значения
| Значение | Описание | Запустить |
|---|---|---|
| transparent | Значение по умолчанию, задаёт прозрачный фон. Это означает, что цвет фона отсутствует. | Запустить » |
| color | Задаёт цвет фона. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla(). | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Какова цель использования свойства 'background-color' в CSS?