Коротко: градиент поверх картинки делают двумя способами. Через несколько фонов: сначала linear-gradient с прозрачностью, затем url(...) — верхний слой в списке рисуется поверх. Или через псевдоэлемент ::after с градиентом поверх <img>. Градиент нужен, чтобы текст на фото оставался читаемым.
Два подхода
| Подход | Когда использовать |
|---|---|
| Несколько фонов у одного блока | картинка как фон секции |
Псевдоэлемент поверх img |
картинка вставлена тегом |
Вкладки: примеры
.hero {
background:
linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35)),
url("hero.jpg") center / cover no-repeat;
}Первый слой — градиент (верхний), второй — картинка. Обратите внимание: сначала перечисляется то, что ближе к зрителю.
.card { position: relative; }
.card img { display: block; width: 100%; }
.card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6));
}Псевдоэлемент накладывается поверх всей карточки. Текст внутри получит тёмную подложку снизу — заголовок станет читаемым.
.overlay-text {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 16px;
color: #fff;
background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}Вариант «плашки» под текстом: градиент только в нижней части. Такой приём часто используют в новостных карточках.
.tint {
background: linear-gradient(135deg, #003F8F, #992222);
mix-blend-mode: multiply;
}mix-blend-mode «смешивает» градиент с подложкой — получается цветной эффект поверх фото. Значения: multiply, screen, overlay. Проверяйте читаемость и контраст.
Практика: герой-блок с текстом
- Задайте секции
background-imageсcover. - Добавьте первым слоем градиент с прозрачностью.
- Текст разместите поверх (grid/flex центрирование).
- Проверьте контраст заголовка и кнопки.
- На мобильном уменьшите высоту и проверьте, что текст не обрезан.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Градиент не виден | порядок слоёв неверный | градиент — первым в списке |
| Картинка пропала | её перебил background-шорткат |
задать слои вместе |
| ::after перекрывает текст | нет z-index у текста |
поднять текст выше |
| Текст не читается | градиент слишком слабый | усилить затемнение |
Проверьте себя
Вопросы и ответы
Уменьшите непрозрачность цвета в градиенте: rgba(0,0,0,.4) вместо .8. И затемняйте только ту часть, где текст.
Задайте градиент из цветов бренда и поиграйте с mix-blend-mode (multiply, overlay), чтобы получить «тонирование».
Плавно менять цвета градиента напрямую нельзя, но можно анимировать opacity слоя с градиентом — эффект «проявления».
Градиентом linear-gradient(180deg, transparent 45%, rgba(0,0,0,.7)) — тёмным становится только нижняя часть.
Итоги
- Градиент поверх фото — первым слоем в
background. - Для тега
<img>— псевдоэлемент::afterсinset: 0. - Затемняйте область под текстом, а не всё фото.
- Проверяйте контраст текста — это главная цель приёма.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.