Как сделать затемнение фона (картинки) на CSS
Сразу оговоримся, что решить такую задачу, как затемнение фона для картинки, можно различными способами. Нет какого-то одного правильного метода. Вы делаете так, как вам удобно и как лучше подходит для вашего конкретного случая.
Для начала пропишем html для наглядности:
Здесь мы вставили свою картинку внутрь блока с классом item-photo.
И дальше перейдем к CSS
.item-photo < position: relative; >.item-photo img < width: 100%; >.item-photo:after
Что мы здесь делаем? Мы добавляем через псевдоэлемент :after прозрачный фон поверх блока с классом item-photo.
Обратите внимание на эту строчку
background-color: rgba(0,0,0,0.5);Здесь мы задаем фон нашему псевдоэлементу. Если бы мы вместо 0.5 прописали бы 1, то картинку полностью покрыл бы черный фон. Вы можете поэкспериментировать и выбрать любое другое число в пределах 0 и 1.
Еще можно задать градиент, вместо простой заливки. То есть, к примеру, чтобы затемнение было к низу картинки. Вот как это можно сделать:
.item-photo < position: relative; >.item-photo img < width: 100%; >.item-photo:after
Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.
Затемнение изображения и фона с помощью CSS
Несколько примеров как затемнить изображение в свойстве background и теге .
Затемнение
Первый способ затемнить img
Сделать тёмный фон под изображением , а самому изображению добавить прозрачность с помощью opacity .
.image < background: #000; >.image img
Пример:
Второй способ затемнить img
CSS фильтр Фильтр brightness у .
.image img
Пример:
Третий способ затемнить img
Полупрозрачный элемент над .
Пример:
.image < position: relative; >.image-filter
Пример:
Затемнение фона background
Если картинка задана через свойство background , то есть два способа ее затемнить:
Первый способ затемнить background
Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .
.image < position: relative; height: 420px; width: 100%; background: url(/image.jpeg) 0px 0px no-repeat; background-size: cover; >.image:before
Затемнение фонового изображение с помощью CSS
Всем привет, сегодня я вам расскажу как затемнить фоновое изображение с помощью CSS. Это часто нужно сделать с баннером или с шапкой сайта, где есть текст, который должен быть читабелен. И чтобы не затемнять каждое изображение в Photoshop, можно это сделать автоматически с помощью CSS. Здесь всё очень просто. Вот HTML код
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.
А вот CSS
header {
position: relative;
background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
header:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.5);
z-index: 2;
}
.inner {
position: relative;
z-index: 3;
color: #fff;
text-align: center;
padding: 50px;
}
И вы получите такую картину
Вот так просто можно затемнить фоновое изображение. На этом у меня всё. До новых статей.
Как добавить оверлей (затемнение) на фоновое изображение
Оверлей (затемнение) на фоновом изображении используется для улучшения читаемости текста или создания определенного настроения на веб-странице. В этой статье мы рассмотрим, как добавить оверлей на фоновое изображение с помощью CSS.
Способ 1: Использование псевдоэлемента
Один из способов добавить оверлей на фоновое изображение – использовать псевдоэлемент ::before или ::after . В этом случае создается «виртуальный» элемент, который накладывается поверх фонового изображения и затемняет его.
Текст поверх изображения
.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 > *
В этом примере мы создаем псевдоэлемент ::before , задаем ему абсолютное позиционирование и полупрозрачный черный фон. Текстовый контент внутри блока получает больший z-index для отображения поверх оверлея.
Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Способ 2: Использование линейного градиента
Еще один способ добавить оверлей на фоновое изображение – использовать линейный градиент в свойстве background-image вместе с самим изображением. В этом случае оверлей создается непосредственно в фоне элемента.
Текст поверх изображения
.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! �� Не забывайте экспериментировать с цветами и степенью затемнения для создания уникального вида вашего сайта.
Если вы хотите углубить свои знания в веб-разработке, рекомендуем обратить внимание на