Gibt es eine Möglichkeit, ein weißes PNG-Bild nur mit CSS zu färben?
Ich weiß, dass es viele CSS-Filter speziell für Webkit gibt, aber ich finde keine Lösung, um ein weißes (#FFFFFF) Bild einzufärben. Ich habe eine Kombination der Filter ausprobiert, aber keiner von ihnen macht mein Bild koloriert. Ich kann das Bild nur im Bereich von Graustufen oder Sepia ändern.
Also meine Frage ist: Gibt es eine Möglichkeit, mein total weißes png nur mit css in Rot zu ändern?
Wie auf diesem Bild gezeigt:
4 Antworten
Das kann mit css masking gemacht werden, obwohl die Browser-Unterstützung leider sehr schlecht ist (ich glaube nur webkit).
%Vor%Da Ihr Bild ganz weiß ist, ist es ein perfekter Kandidat für die Maskierung. Die Funktionsweise der Maske besteht darin, dass das ursprüngliche Element unabhängig davon, wo das Bild weiß ist, als normal angezeigt wird, wobei das ursprüngliche Element schwarz (oder transparent) nicht angezeigt wird. Alles in der Mitte hat ein gewisses Maß an Transparenz.
BEARBEITEN :
Sie können dies auch in FireFox mit leichter Hilfe von svg erhalten.
Ich habe kürzlich die gleiche Frage und ich denke, dass dieser Ansatz für zukünftige Leser lesenswert ist. Probieren Sie dies
aus %Vor%Helligkeit wird das Bild verdunkeln, Sepia wird es ein wenig gelblich machen, sättigen, um die Farbe zu erhöhen, und zuletzt Farbton drehen, um die Farbe zu ändern. Es ist jedoch nicht Cross-Browser-freundlich:
-
Es wird vom IE nicht unterstützt
-
Bei chrome macht
hue-rotate(25deg)jedes Bild rot, aber Sie brauchen es ein negativer Wert in Firefox, z.B.hue-rotate(-25deg), um es rot zu machen.
Sie können dies auf Mozilla-Browser ausrichten: Ссылка
Hier finden Sie einige nützliche Tipps und Tools, die ich bei der Arbeit mit Bildern / Symbolen mit css verwendet habe:
- Wenn Sie die SVG-Version des Bildes haben, können Sie sie in konvertieren
Schriftart Symbole mit diesem Werkzeug Ссылка . Um die Farbe zu ändern, brauchen Sie nur
color:#f00;genau wie die Schriftfarben. - Wenn Sie diesen Effekt für den Hover-Status erzielen möchten, verwenden Sie rotes Bild mit
filter: brightness(0) invert();im Nicht-Hover-Status undfilter: brightness(1);im Hover-Status. Bisher wird dies jedoch nicht auf IE funktionieren - Verwenden Sie Sprite-Blatt. Sie können sich selbst mit Bildbearbeitungstools erstellen oder Sprite-Sheet-Generatoren verwenden, die online verfügbar sind. Dann können Sie SpriteCow verwenden, um die CSS für jedes Teilbild Ihres Spritesheets zu erhalten.
Dies kann mit einem CSS-Filter erfolgen, der auf einen SVG-Filter (webkit browsers + firefox) verweist. Hier ist der SVG-Filter.
%Vor%Tags und Links css colors css-filters