Как на Css на GIF поставить цветную немного прозрачную плёнку?

Question

background-image: url(https://i.gifer.com/3wmY.gif);
background-repeat: no-repeat;
background-size: cover;

Сейчас gif анимация стоит вот так,хочу сверху цветную плёнку накинуть чтобы сливался с цветом сайта,но не могу

Answer 1

Через :before или :after самый простой вариант:

.image {
  background-image: url(https://i.gifer.com/3wmY.gif);
  background-repeat: no-repeat;
  background-size: cover;
  width: 400px;
  height: 300px;
  position: relative;
}

.image:before {
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  background-color: rgba(241, 178, 236, 0.4);
}

<div class="image"></div>

БЛОГ НА HUSL

Как на Css на GIF поставить цветную немного прозрачную плёнку?

Ответы (1 шт):