Оверлей (затемнение) на фоновом изображении используется для улучшения читаемости текста или создания определенного настроения на веб-странице. В этой статье мы рассмотрим, как добавить оверлей на фоновое изображение с помощью 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! 😊 Не забывайте экспериментировать с цветами и степенью затемнения для создания уникального вида вашего сайта.
Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на эту школу, которая предлагает качественное обучение для начинающих.
Добавить комментарий