Wie man ein Weiß-auf-transparentes Bild mit CSS in eine beliebige Farbe einfärbt?

Question

Wie nehme ich ein Bild mit nur weißen und transparenten Pixeln (example) und färbe es, sagen wir, rot oder orange, nur mit CSS?

Frage unten wurde zuvor gefragt -

Change color of PNG image via CSS?

Die Antwort sagt Filter zu verwenden, aber nicht angibt, welche Kombination von Filtern würde es funktioniert. Gibt es Filterkombinationen, die es mir erlauben würden, ein Weiß-auf-Transparent-Bild zu Rot zu machen?

---

Zur Klarstellung: Ich möchte die Farbe den weißen Teil des Bildes, nicht um den Hintergrund zu umfärben. Zum Beispiel möchte ich es rot-auf-transparent.

img { 
 
    -webkit-filter: brightness(50%) saturate(200%) hue-rotate(90deg); 
 
    }

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>

Answer 1

spielte ich ein wenig herum und fand eine mögliche Lösung, um nur die weißen Teile zu malen:

img { 
 
    display: block; 
 
    background: black; 
 
    -webkit-filter: brightness(.5); 
 
} 
 
.recolor { 
 
    position: relative; 
 
    display: inline-block; 
 
    -webkit-filter: brightness(1) contrast(300%) invert(1); 
 
} 
 
.recolor:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 255, 255, 0.3); 
 
}

<figure class="recolor"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/200px-White_Globe_Icon.png"> 
 
</figure>

So funktioniert es:

1. Make Bild Hintergrund schwarz und stellen Sie die Helligkeit auf die Hälfte, den Vordergrund grau
2. ein Wrapper-Element erstellen zu machen (<figure>) und ein Overlay erstellen (:after) der invertierten Farbe, die Sie mit einer relativ geringen Opazität wünschen
3. Jetzt Filter das Wrapper-Element: machen Sie es so hell mit so hohem Kontrast, dass der Hintergrund schwarz wird, aber die Vordergrundfarbe bleibt.
4. Jetzt nur noch die Hülle invertieren auf Ihre Vordergrundfarbe auf weißen

Limits erhalten: Transparenz verloren geht, aufgrund Filterung der Farben sind vielleicht nicht genau die Farben, die Sie wollen, ist browser support nicht optimal

Answer 2

Geben Sie einfach Hintergrundfarbe zum Bild, zum Beispiel unten.

Verwenden Sie dieses Bild

HINWEIS: Bild transparent ist

CSS

img{ 
    background-color: red; 
} 

HTML

<img src="test.png"> 

Answer 3

Es ist möglich, ein weißes Bild mit Filtern zu "färben", aber die Ergebnisse sind nicht perfekt.Der erste Schritt ist ein sepia Filter und dann ein hue-rotate.

Ein echtes "Rot" ist vielleicht schwieriger zu erreichen, aber Sie können damit weiter spielen.

img { 
 
    max-height: 100vh; 
 
    width: auto; 
 
    -webkit-filter: 
 
    sepia(100%) 
 
    saturate(2000%) 
 
    hue-rotate(222deg); 
 
} 
 
body { 
 
    background: green; 
 
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/White_Globe_Icon.png/600px-White_Globe_Icon.png"></img>