background-color задаёт цвет фона элемента: именем цвета, HEX-кодом или через rgb(). По умолчанию фон прозрачный, и это значение не передаётся дочерним элементам автоматически - каждому элементу фон нужно задавать отдельно.
В этом уроке
Попробуй прямо сейчас: смени background-color у .child на обычный сплошной цвет (например tomato) или на transparent - посмотри, как меняется картинка.
Как задать background-color: имя цвета, HEX и RGB
background-color принимает те же форматы цвета, что и свойство color для текста (см. урок про цвет текста): английское имя цвета, HEX-код вида #rrggbb или функцию rgb(). Разница только в том, что background-color красит фон элемента, а не сам текст внутри него.
background-color: tomato; - именованный цвет, самый простой способ для базовых оттенков.
color: tomato; вместо background-color - изменится цвет ТЕКСТА, а не фона элемента.
Прозрачный фон по умолчанию и почему цвет не наследуется
Пока background-color не задан явно, у элемента прозрачный фон - виден фон того, что находится позади (например фон родителя или страницы). Важно: background-color не наследуется от родителя, в отличие от некоторых текстовых свойств. Если у родителя жёлтый фон, а у ребёнка background-color не задан вовсе, ребёнок не "получает" жёлтый цвет - он просто остаётся прозрачным, и жёлтый цвет родителя виден сквозь него.
.child { background-color: gold; } - если нужен тот же фон, что у родителя, его нужно задать ребёнку явно, отдельной строкой.
Расчёт на то, что .child сам "унаследует" background-color родителя - так не работает: у ребёнка останется значение по умолчанию, transparent.
Закрашивает ли background-color место под рамкой
По умолчанию фон элемента заливает область вплоть до внешнего края рамки (border) - то есть буквально ПОД самой рамкой. Обычно это незаметно, потому что сплошная непрозрачная рамка просто рисуется поверх фона и полностью его закрывает. Но если рамка пунктирная, точечная или частично прозрачная, в зазорах становится виден именно цвет фона элемента, а не то, что находится позади него.
border: 8px dashed #333; у элемента с background-color - в промежутках между штрихами рамки виден цвет фона самого элемента.
Ожидание, что фон "останавливается" точно на границе контента и не заходит под рамку - по умолчанию это не так, фон заливает область вплоть до внешнего края border.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Рассчитывают, что дочерний элемент автоматически получит фон родителя | background-color не наследуется - у ребёнка остаётся transparent, если не задать явно | Указывать background-color отдельно для каждого элемента, которому нужен фон |
| Пытаются задать два цвета сразу через background-color для эффекта градиента | Свойство принимает только один сплошной цвет - второе значение просто не сработает | Для градиента использовать background-image: linear-gradient(...) |
| Не учитывают, что фон по умолчанию заходит под рамку | При пунктирной или полупрозрачной рамке цвет фона неожиданно "просвечивает" в зазорах | Это нормальное поведение border-box - при необходимости ограничить область фона использовать background-clip |
| Опечатка в названии класса в CSS или в атрибуте class в HTML | Браузер тихо игнорирует правило целиком - ни ошибки, ни визуального эффекта | Сверить название класса в CSS и в разметке символ в символ |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Именованный цвет | background-color: tomato; |
| HEX-код | background-color: #ffcc00; |
| RGB | background-color: rgb(30, 144, 255); |
| С прозрачностью | background-color: rgba(30, 144, 255, 0.4); |
| Прозрачный (по умолчанию) | background-color: transparent; |
| Принудительно скопировать цвет родителя | background-color: inherit; |
Коротко: отвечаем на вопросы
Наследуется ли background-color от родительского элемента?
Нет. Если у дочернего элемента background-color не задан, он остаётся прозрачным (transparent), и через него просто виден фон родителя - но это не то же самое, что реальное наследование значения. Если нужен именно такой же цвет у ребёнка, его нужно задать отдельно.
Почему background-color иногда не отображается, хотя в CSS всё написано вроде бы правильно?
Самая частая причина - опечатка в имени класса или селектора (в CSS написано одно название, а в HTML - слегка другое), из-за которой правило просто не находит свой элемент. Также фон может быть не виден, если у блока фактически нулевая высота (например все дочерние элементы имеют float без явного clearfix) - тогда красить попросту нечего.
