Wie kann ich die Farbe des Symbolbildes mit CSS ändern? [Duplikat]
Ich versuche herauszufinden, wie man die Farbe eines Bildes ändert, das halb transparent und halb durchgehend ist.
Ich möchte in der Lage sein, die Farbe des Weiß zu ändern, damit ich einen Hover hinzufügen und die Möglichkeit hinzufügen kann, die Farben in Wordpress dynamisch zu ändern. Die Verwendung von Photoshop zum Ausfüllen des Bildes ist keine Option, da ich in meinem Wordpress-Theme einen Farbwechsler erstellen werde.
Ich habe ein jQuery-Skript namens JFlat.js verwendet, weil es genau GENAU schien, was ich brauchte. Obwohl es für mich überhaupt nicht zu funktionieren scheint. Ich folge den genauen Schritten, die ich vermute, weil es eine alte Version von jQuery verwendet.
Kann mir jemand Hilfe anbieten?
Hier ist eine schwarze Version auf dem Bild, Sie können die weiße nicht sehen, also werde ich diese für eine bessere Idee von dem, worüber ich spreche, veröffentlichen.
3 Antworten
Verwende ein SVG-Symbol , das stammt von Ikonisch . Icon Melone ist auch gut
Ansonsten könntest du ein Schrift-Icon verwenden, das stammt von FontAwesome
Wenn Sie müssen, können Sie einen CSS-Filter verwenden, der jedoch nur in neueren Browsern unterstützt . Das beste Fallback wäre, den SVG-Filter zu verwenden, um dasselbe zu tun und eine Daten-URL zu verwenden, um es anzuwenden. Demo
%Vor%Sie können auch ein Sprite wie agconti vorgeschlagen verwenden
Sie könnten versuchen, JQuery alle zusammen zu vermeiden und einfach nur alte CSS und HTML zu verwenden. Der Code zeigt das Konzept, aber Sie müssen die Dimensionen anpassen, damit es funktioniert. Sie könnten das mit border-radius: 100% nützlicher finden. Dann können Sie Folgendes anwenden: Hover-Stile nach Bedarf.
%Vor%Für was es sich lohnt, kann dies auch mit Svg gemacht werden
Sieh dir googles Online-Svg-Editor an um die SVG zu produzieren. (außer den CSS-Klassen, die ich später hinzugefügt habe)