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

Ja :)

Surfin' Safari - Blog Archiv " CSS-Masken

WebKit unterstützt jetzt Alphamasken in CSS. Mit Masken können Sie den Inhalt eines Rahmens mit einem Muster überlagern, das verwendet werden kann, um Teile des Rahmens in der endgültigen Anzeige auszublenden. Mit anderen Worten: Sie können komplexe Formen auf der Grundlage der Alphakurve eines Bildes ausschneiden.
[...]
Wir haben neue Eigenschaften eingeführt, mit denen Webdesigner diese Masken und ihre Anwendung weitgehend steuern können. Die neuen Eigenschaften sind analog zu den bereits vorhandenen Eigenschaften "Hintergrund" und "Rahmenbild".

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Answer 2

Ich denke, ich habe eine Lösung für dieses Problem, die a) genau das ist, wonach Sie vor 5 Jahren gesucht haben, und b) ein bisschen einfacher ist als die anderen Code-Optionen hier.

Bei jedem weißen png (z. B. weißes Symbol auf transparentem Hintergrund) können Sie einen ::after-Selektor zum Umfärben hinzufügen.

.icon {
    background: url(img/icon.png); /* Your icon */
    position: relative; /* Allows an absolute positioned psuedo element */
}

.icon::after{
    position: absolute; /* Positions psuedo element relative to .icon */
    width: 100%; /* Same dimensions as .icon */
    height: 100%;
    content: ""; /* Allows psuedo element to show */
    background: #EC008C; /* The color you want the icon to change to */
    mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}

Siehe diesen Codepen (Anwendung des Farbwechsels bei Hover): http://codepen.io/chrscblls/pen/bwAXZO

Answer 3

En die meisten Browser können Sie Filter verwenden:

• bei beiden <img> Elemente und Hintergrundbilder von anderen Elementen

• und setzen Sie sie entweder statisch in Ihrem CSS oder dynamisch mit JavaScript

Siehe Demos unten.

---

<img> Elemente

Sie können diese Technik auf eine <img> Element:

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

Hintergrundbilder

Sie können diese Technik auf ein Hintergrundbild anwenden:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<div id="original"></div>

<div id="changed"></div>

JavaScript

Sie können JavaScript verwenden, um einen Filter zur Laufzeit zu setzen:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;

#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}

<div id="original"></div>

<div id="changed"></div>

Answer 4

Das img-Tag hat wie jedes andere Tag auch eine Hintergrundeigenschaft. Wenn Sie ein weißes PNG mit einer transparenten Form haben, wie eine Schablone, dann können Sie dies tun:

<img src= 'stencil.png' style= 'background-color: red'>

Answer 5

Wenn Sie ein Bild von Schwarz nach Weiß oder von Weiß nach Schwarz ändern, funktioniert der Filter "Farbton drehen" nicht, weil Schwarz und Weiß technisch gesehen keine Farben sind. Stattdessen müssen Schwarz-Weiß-Farbänderungen (von Schwarz nach Weiß oder umgekehrt) mit der Eigenschaft "Invertieren" vorgenommen werden.

.img1 { filter: invert(100%); }