Я хочу создать такой цвет для моего фонового изображения.
Я пробовал это -webkit-filter: opacity(.5) drop-shadow(0 0 hsl(277, 64%, 61%)); filter: opacity(.5) drop-shadow(hsl(277, 64%, 61%));
, все равно не работает.
Как произвести такой эффект на изображение
9 августа 2021 в 04:18
48
1
Ответы (1)
9 августа 2021 в 04:36
Попробуйте использовать селектор before
, чтобы добавить цвет background
и opacity
для наложения изображения
.overlay {
position: relative;
}
.overlay:before {
content:"";
width: 100%;
height: 100%;
background: indigo;
position: absolute;
opacity: 0.6;
z-index: 1;
}
.overlay img {
width: 100%;
filter: grayscale(1);
}
<div class="overlay">
<img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" />
</div>