CSS: Hintergrundfarbe und Symbol – Masken invertieren ⇐ CSS

[Guest]

Das ist eine schwierige Frage. Stellen wir uns vor, ich habe div mit einer bestimmten Größe (

Code: Select all

width

und height) und eine Hintergrundfarbe: pink;. Nehmen wir nun an, ich habe ein Symbol, eine PNG-Datei (oder eine SVG-Datei oder etwas anderes) und möchte, dass sich das Bild in die Hintergrundfarbe einfügt.
Mit anderen Worten: Ich möchte, dass das Symbol transparent angezeigt wird. und das Rosa drumherum. So:

Es ist genau wie die mask-image-Eigenschaft , ganz im Gegenteil.

Details:

• Es besteht kein Bedarf an Browserkompatibilität (Es ist nicht für den Produktionsgebrauch bestimmt)
• Ich kann weder Javascript noch JQ (HTML/CSS) verwenden
• Und natürlich kann ich die PNG-Datei nicht bearbeiten (um Transparenz und Farbe umzukehren )< /li>

Hier sind zwei PNG, die mit der Hintergrundfarbe übereinstimmen:




Verwandt:

• Das ist nicht so, dass das PNG einfach ein Zeichen war: Codepen.
• Das ist nicht nur die Verwendung mask-image: jsfiddle
• https://tympanus.net/codrops/css_reference/mask-image/
• https://alligator.io/css/masking-with-mask-image/
• https://codepen.io/yoksel/full/fsdbu/

Habt ihr irgendeine Ahnung, wie man das erreichen kann? Verhalten?
Lassen Sie mich wissen, wenn Sie weitere Details benötigen.