Как сделать такой логотип?

Question

[Capitan_S]

На макете есть такое место:
joxi.ru/KAg7V8nUZL06Al
на белом фоне зеленый прямоугольник, а на нём логотип выполненный вот в таком виде
joxi.ru/eAO0O7yFR5KJro
К логотипу применяется эффект Color ovelay - Blend mode: Normal-Color:f7f7f1
Как реализовать это с помощью css?

Comments

[Nikolay Talanov]

Погуглите css blend modes, css filters. Еще можно тоже самое, но про SVG.

Answer 1

[Сергей]

А если перевести в svg? Есть же конвертеры даже онлайн, которые из png сделают svg. А в svg, в текстовом редакторе, менять цвета по надобности.

Answer 2

[Анна Бакурова]

Прочитайте про css маски.

Comments

[Capitan_S]

Спасибо за совет! Удалось сделать для webkit, через -webkit-mask, но вот для firefox пока не могу найти ничего конкретного. Можете подсказать какой-нибудь ресурс?

[Анна Бакурова]

Capitan_S: действительно всё ещё актуальна тема с поддержкой, но это исправит только время. Если хотите с хорошей поддержкой то тут вам поможет svg. Переводите картинку в svg и манипулируйте через svg цветом. Если нужны конкретные ссылки про svg то пишите, а так загуглить всё по запросам о svg и переводе png в svg просто.

[Capitan_S]

Угу. Как раз пришел к этому выводу и перевожу в svg. Спасибо большое за направление.

Answer 3

[Денис Инешин]

Давно пора принять к сведению, что CSS не умеет всякие смешения слоёв. Есть кое-какие работы в этом направлении, но о кроссбраузерности речь не идет пока: https://css-tricks.com/basics-css-blend-modes/
По этому: слить слои - вырезать картинку.