Programmiererforum

width

Das ist eine schwierige Frage. Stellen wir uns vor, ich habe div mit einer bestimmten Größe ([code]width[/code] 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:
[img]https://i.sstatic.net/770mY.png[/img]
Es ist genau wie die mask-image-Eigenschaft , ganz im Gegenteil.

Details:
[list]
[*]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>
[/list]
Hier sind zwei PNG, die mit der Hintergrundfarbe übereinstimmen:
[img] „https://i.sstatic.net/SAaM7s.png“ /[/img]
[img]https://i.sstatic.net/qg2o1.png[/img]


Verwandt:
[list]
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/
[/list]

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