Как добавить оверлей (затемнение) на фоновое изображение

Оверлей (затемнение) на фоновом изображении используется для улучшения читаемости текста или создания определенного настроения на веб-странице. В этой статье мы рассмотрим, как добавить оверлей на фоновое изображение с помощью CSS.

Способ 1: Использование псевдоэлемента

Один из способов добавить оверлей на фоновое изображение – использовать псевдоэлемент ::before или ::after. В этом случае создается «виртуальный» элемент, который накладывается поверх фонового изображения и затемняет его.

<div class="image-with-overlay">
  <p>Текст поверх изображения</p>
</div>

.image-with-overlay {
  position: relative;
  background-image: url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
}

.image-with-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Здесь можно изменить цвет и степень затемнения */
  z-index: 1;
}

.image-with-overlay > * {
  position: relative;
  z-index: 2;
}

В этом примере мы создаем псевдоэлемент ::before, задаем ему абсолютное позиционирование и полупрозрачный черный фон. Текстовый контент внутри блока получает больший z-index для отображения поверх оверлея.

Способ 2: Использование линейного градиента

Еще один способ добавить оверлей на фоновое изображение – использовать линейный градиент в свойстве background-image вместе с самим изображением. В этом случае оверлей создается непосредственно в фоне элемента.

<div class="image-with-gradient-overlay">
  <p>Текст поверх изображения</p>
</div>

.image-with-gradient-overlay {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('path/to/your/image.jpg');
  background-size: cover;
  background-position: center;
}

Здесь мы используем линейный градиент с двумя одинаковыми полупрозрачными цветами, что создает равномерный оверлей поверх изображения.

Теперь вы знаете два способа добавления оверлея на фоновое изображение с помощью CSS! 😊 Не забывайте экспериментировать с цветами и степенью затемнения для создания уникального вида вашего сайта.

Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на эту школу, которая предлагает качественное обучение для начинающих.