Задать вопрос
@Alice777
html

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

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

Я тут набросал, может кто поможет
https://jsfiddle.net/or7ta4pd/
  • Вопрос задан
  • 318 просмотров
1 комментарий
Подписаться 1 Оценить 1 комментарий
Решения вопроса 1
sergiks
@sergiks
♬♬
Есть два способа:

Первый вариант: 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
Ответ написан
4 комментария
4 комментария
Пригласить эксперта
Ответы на вопрос 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-масками. Два дива, один на другом: первый с нормальными бабами, второй — с зелёными. На каждый див наложить противоположные маски, дополняющие друг друга. Маски анимировать.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Devops для видео сервиса
26 апр. 2024, в 06:46
1000 руб./в час
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Ещё заказы