Как затемнить фоновое изображение CSS без нового div

Быстрый ответ

Если вам нужно быстро затемнить фоновое изображение с помощью CSS, примените полупрозрачный черный псевдоэлемент ::after:

.your-element::after {
  content: '';
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.6); /* Это затемнение. Его степень можно отрегулировать... */
  width: 100%;
  height: 100%;
}

Используйте альфа-канал в rgba для контроля над степенью затемнения. Обязательно пропишите для родительского элемента свойство position: relative.

Подробности

Новый подход: наложения градиентов

Для более тонкой настройки удобно использовать линейные градиенты CSS3. Создайте градиент с одинаковыми начальным и конечным цветами — он будет наложен на изображение:

.your-element {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('your-image.png');
}

В этом случае прозрачность также регулируется через rgba для получения необходимой степени затемнения.

Подробнее об этом расскажет наш спикер на видео

Сетевые защиты: резервные цвета и прозрачность

Смешивание rgba и градиентов позволяет нам контролировать прозрачность изображения. Если основное изображение по какой-то причине не загрузится, вызовется резервный цвет:

.your-element {
  background-color: grey; /* Это план Б на случай проблем */
  /* ...и другие стили... */
}

Подгонка изображения: позиционирование и размер

Для того чтобы изображение корректно отображалось на различных устройствах, настраивайте background-position и background-size. Это поможет выровнять изображение и наложение.

Рискните и выберите нестандартные решения

● Работа с изображением: CSS-фильтры

Использование фильтра brightness() на элементе .your-element позволяет регулировать степень затемнения изображения:

.your-element {
  filter: brightness(60%);
}

Мощь фильтра велика, но вам придется провести тестирование на разных браузерах, поэтому будьте бдительны.

● Инклюзивность: совместимость с браузерами

Учтите поддержку различных свойств браузерами и при необходимости используйте полифилы или более простые решения.

Визуализация

Пример применения CSS в действии:

.image {
  background-image: url('beach.jpg');
  position: relative;
}

.image::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.5); /* Затемнение на изображении */
  mix-blend-mode: multiply; /* Добавляем магию смешивания ✨ */
}

Фоновое изображение наполнено светом, а прозрачное наложение служит защитой, создавая уютную затемненную картинку.

Улучшите свои навыки

Экспериментируйте с прозрачностью и режимами смешивания для настройки идеального тона изображения.

Финальный штрих: CSS-переменные

Для более гибкого управления уровнем затемнения воспользуйтесь CSS-переменными и JavaScript.

Полезные материалы

1. Окрашивание изображений с использованием множественных фонов | CSS-Tricks — Здесь можно подробнее узнать о техниках затемнения изображений в CSS.
2. CSS: mix-blend-mode – MDN — Полное руководство по использованию свойства mix-blend-mode.
3. Свойство CSS filter – W3Schools — Применение фильтров для добавления стилевых эффектов к элементам HTML.
4. CSS фильтры: размытие, серый тон, яркость и многое другое — SitePoint — О том, как изменить вид ваших изображений с помощью различных техник фильтрации.
5. CSS – Псевдоэлементы — Как использовать псевдоэлементы CSS для создания впечатляющих визуальных эффектов.
6. CSS Gradient — Генератор, создание и фон — Генератор градиентов для создания эффекта затемнения.
7. Режимы наложения в CSS – A List Apart — Подробное описание режимов наложения в CSS и их практического применения.