@Alice777

Как добиться такого эффекта для двух пересекающихся картинок?

Есть сайт e03.epicurrence.com/, там реализован момент наложения background-blend-mode: multiply;, однако он применен каким-то образом именно в область пересечения двух картинок. Как это реализовать?49710d44ca4b4b7c949131694fe4f536.png

Я тут набросал, может кто поможет
https://jsfiddle.net/or7ta4pd/
  • Вопрос задан
  • 317 просмотров
Решения вопроса 1
Есть два способа:

Первый вариант: mix-blend-mode: multiply;Fiddle

Второй вариант, когда обе картинки – фон одного элемента:
.fx {
  background-image: url( bg1.png ), url( bg2.png );
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply, normal;
}
Fiddle
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@AnneSmith
самая ленивая
это не картинка а большая буква
P

.supertext p {
    font-size: 1200px;
}
.supertext p {
    font-size: 1400px;
    font-family: FuturaBT-Bold,sans-serif;
    line-height: 100%;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    color: #00c775;
    font-weight: 700;
    mix-blend-mode: multiply;
    pointer-events: none;
}
Ответ написан
Комментировать
@choupa
Архитектор (обычный, который строит)
Мой скромный опыт подсказывает только вариант с SVG-масками. Два дива, один на другом: первый с нормальными бабами, второй — с зелёными. На каждый див наложить противоположные маски, дополняющие друг друга. Маски анимировать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
05 февр. 2023, в 21:04
500000 руб./за проект
05 февр. 2023, в 20:19
500 руб./за проект
05 февр. 2023, в 19:42
1000000 руб./за проект