Farbe eines PNG-Bildes über CSS ändern?

Question

Angesichts einer transparenten PNG-Anzeige eine einfache Form in weiß, ist es möglich, irgendwie die Farbe dieser durch CSS ändern? Eine Art von Overlay oder was nicht?

Answer 1

Ich habe dies beim Googeln gefunden, ich fand das Beste für mich...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

Answer 2

/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);

/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);

/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);

/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);

Answer 3

Versuchen Sie dies:

 -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1);

Answer 4

Ich brauchte eine bestimmte Farbe, also hat der Filter für mich nicht funktioniert.

Stattdessen habe ich ein div erstellt und dabei mehrere CSS-Hintergrundbilder und die Funktion "linearer Farbverlauf" (die selbst ein Bild erzeugt) verwendet. Wenn Sie den Überlagerungsmodus verwenden, wird Ihr tatsächliches Bild mit dem generierten "Gradienten"-Bild überlagert, das die gewünschte Farbe enthält (hier #BADA55)

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }

<div class="colored-image"></div>

Answer 5

Verwenden Sie dieses großartige Codepen-Beispiel, in das Sie Ihren Hex-Farbwert eingeben, und es gibt den benötigten Filter zurück, um diese Farbe auf png anzuwenden

CSS-Filter-Generator zur Umwandlung von Schwarz in die Ziel-Hex-Farbe

zum Beispiel brauchte ich mein png, um die folgende Farbe #EF8C57 zu haben

dann müssen Sie den folgenden Filter auf Ihr png anwenden Ergebnis:

filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);