Частичная прозрачность через css filter?

Question

[markilfin]

Возможно ли добиться подобного эффекта через css filter/backdrop-filter? трапециевидную фигуру могу сохранить в svg.

Comments

[Кирилл Молчанов]

а чем opacity или rgba не устраивает?

[markilfin]

Кирилл Молчанов, пробовал, через opacity получается слишком тускло

[Danny Arty]

markilfin, помимо opacity добавьте насыщенность. Поиграйтесь с css-фильтрами, достигните подходящего результата. Если что в интернете куча сервисов онлайн-генераторов фильтров css, поможет облегчить работу

Answer 1

[RAX7]

Попробуй
mix-blend-mode: multiply;
https://developer.mozilla.org/ru/docs/Web/CSS/mix-...

Comments

[markilfin]

спасибо, совсем забыл про mix-blend-mode, помогло.

Answer 2

[auddit]

Расположите фигуру поверх картинки используя абсолютное позиционирование.
Метод наложения нужно смотреть в макете, если есть исходник. Если нет, то экспериментировать с mix-blend-mode. Ссылка выше.

Answer 3

[Александр Талалаев]

Может сработать так:
Общая идея - формы две, одна выше другая ниже фоток.
Сделать например поместив фотки в один контейнер. И через (например через псевдо элементы, или напрямую) сделать две трапеции, одна выше с прозрачностью(я думаю можно подобрать чтобы поверху фоток было ок), а вторая ниже фоток, для насыщенности фона.