background-color: фон под изображением и текстом
background-color задаёт цвет фона элемента и остаётся полезным даже при наличии фонового изображения.
Назначение
background-color задаёт цвет фона элемента и остаётся полезным даже при наличии фонового изображения.
Как это работает
Цвет рисуется под слоями background-image. Прозрачное значение позволяет видеть фон предка, но не означает наследование его цвета как собственного значения. Область закраски зависит от background-clip.
Пример
<style>
.notice{background-color:#eaf4ee;color:#173c2e;padding:20px;border:1px solid #aac4b5}
</style>
<div class="notice">Запасной фон сохраняет читаемость текста.</div>Что должно получиться
Блок закрашен светлым цветом, текст остаётся тёмным. В отличие от opacity изменение фона не делает автоматически прозрачными все дочерние элементы.
Граница применения и частая ошибка
Не проверяйте контраст текста только на успешно загруженной картинке. При её отсутствии или прозрачных участках читатель увидит запасной цвет, который тоже должен обеспечивать читаемость.
Самостоятельная проверка
Задайте фоновый цвет и временно отключите изображение в своей странице. Затем проверьте прозрачный вариант: определить видимый фон нужно с учётом всей цепочки предков.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.