Как произвести такой эффект на изображение

avatar
Aksabar Accelerating
9 августа 2021 в 04:18
100
1
0

enter image description here

Я хочу создать такой цвет для моего фонового изображения. Я пробовал это -webkit-filter: opacity(.5) drop-shadow(0 0 hsl(277, 64%, 61%)); filter: opacity(.5) drop-shadow(hsl(277, 64%, 61%));, все равно не работает.

Источник

Ответы (1)

avatar
Minal Chauhan
9 августа 2021 в 04:36
4

Попробуйте использовать селектор 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>