Как затемнить картинку под текстом
Короткий ответ
Положите полупрозрачный градиент поверх картинки прямо в background:
<div style="display: grid; place-items: center; height: 180px; background: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)), url('/media/photo-800x500.jpg') center / cover; color: white; font-size: 28px;">
Summer garden
</div>Фоны в списке накладываются друг на друга: первый лежит сверху. Градиент из двух одинаковых цветов даёт ровное затемнение.
Затемнение снизу
Если текст стоит внизу, достаточно затемнить только нижнюю часть — так картинка видна лучше:
<div style="display: flex; align-items: end; height: 180px; padding: 16px; box-sizing: border-box; background: linear-gradient(transparent 40%, rgb(0 0 0 / 0.8)), url('/media/photo-800x500.jpg') center / cover; color: white;">
<h3 style="margin: 0;">Summer garden</h3>
</div>Поверх обычной img
Когда картинка — это <img>, слой затемнения делают псевдоэлементом родителя:
<style>
.cover { position: relative; width: 300px; }
.cover img { display: block; width: 100%; height: auto; }
.cover::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.4); }
</style>
<div class="cover"><img src="/media/photo-400x250.jpg" alt="A flower"></div>Частая ошибка
Затемняют весь блок через opacity или filter: brightness(). Вместе с картинкой тускнеет и текст внутри блока — эти свойства действуют на элемент целиком со всем содержимым. Затемняйте отдельный слой, а не сам блок.
Функции из этого ответа
- linear-gradient() — Плавный переход между цветами вдоль прямой — используется как фоновая картинка.
- background-image — Одна или несколько фоновых картинок: файлы или градиенты.
- ::after — Создаёт виртуальный последний дочерний элемент — для значков, пометок и украшений после содержимого.
- filter — Графические эффекты элемента: размытие, чёрно-белый режим, яркость, тень по форме.
- position — Как позиционируется элемент: в обычном потоке или по смещениям.