CSS: цвет фона и значок — инвертирование масок ⇐ CSS

[Anonymous]

вот это сложный вопрос. Предположим, у меня есть div определенного размера (

Код: Выделить всё

width

и высота), а также цвет фона: розовый;. Теперь предположим, что у меня есть значок, файл PNG (или svg, или что-то еще), и я хочу, чтобы изображение «врезалось» в цвет фона.
Другими словами, я хочу, чтобы значок отображался прозрачным, и розовый цвет вокруг него. Вот так:

Это похоже на свойство Mask-image. , как раз наоборот.

Подробности:

• Совместимость браузера не требуется. (это не для производства использовать)
• Я не могу использовать Javascript или JQ (html / css)
• И, конечно, я не могу редактировать файл png (чтобы инвертировать прозрачность и цвет )

Вот два PNG, соответствующие цвету фона:
< img alt="stackoverflow" src="https://i.sstatic.net/SAaM7s.png" />

< /p>

Связано:

• Это не значит, что png был просто символом: codepen .
• Это не просто используя маску-изображение: jsfiddle
• https://tympanus.net/codrops/css_reference/mask-image/
• https ://alligator.io/css/masking-with-mask-image/
• https://codepen.io/yoksel/full/fsdbu/

Ребята, у вас есть какие-нибудь идеи, как добиться такого поведения?
Дайте мне знать, если вам нужна дополнительная информация.

Подробнее здесь: https://stackoverflow.com/questions/506 ... ting-masks