Emulieren Photoshop "Color Overlay" mit CSS-Filter?
Ich habe ein Icon, mit dem ich die Farbe von CSS ändern möchte. Es ist in einem Daten-uri'd optimierten SVG im CSS eingebunden.
Normalerweise war das nicht möglich. Deshalb wurden Icon-Fonts erfunden; Ihr Hauptvorteil gegenüber SVG ist, dass sie die Regeln color und text-shadow von CSS erhalten können. Nun, CSS-Filter sind jetzt in der Lage, beides für beliebige Bilder zu tun, und jetzt funktionieren sie in allen Blink-, Webkit- und Gecko-Browsern und kann für zukünftige IE / Spartan erwartet werden.
A text-shadow Ersatz ist einfach; Verwenden Sie einfach den Filter drop-shadow .
Das Bild in eine bestimmte Farbe einzufärben hat sich jedoch trotz aller notwendigen Filter als sehr schwierig erwiesen. Meine Theorie ist bis jetzt wie folgt:
- Verwenden Sie
contrast(0), um das gesamte Bild in ein Vollbild zu konvertieren Grau, während der Alphakanal beibehalten wird (das Mozilla-Wiki sagt, es würde schwarz werden, aber in allen Browsern wird es grau, muss ein Tippfehler sein). - Benutze
sepia(1), weil wir nicht mit dem Farbton arbeiten können / Sättigung auf einem grauen Bild. Dies stellt sicher, dass das gesamte Bild aus einer Referenzfarbe besteht, mit der wir rechnen können. insbesondere#AC9977.
An diesem Punkt sollten wir in der Lage sein, das gesamte Bild von dem, was nun fest ist #AC9977 , mit Hilfe von hue-rotate , saturate und brightness .
Erstens, welche Farbkoordinaten verwenden Browser? Ich konnte keinen Sinn für die Spezifikation finden, um sicherzustellen, dass HSL ( Helligkeit ) oder HSV ( Wert ) , aber seit HSB ( Helligkeit ) ist ein anderer Name für HSV, ich nehme an, dass es HSV verwendet. Außerdem sättigt etwas wie brightness(999) Farben (anstatt sie weiß zu machen), was bei HSV aber nicht bei HSL passieren würde.
Ausgehend von dieser Annahme würden wir wie folgt vorgehen:
- Berechnen Sie den Farbtonunterschied zwischen
#AC9977und der gewünschten Farbe und verwenden Siehue-rotate. - Berechnen Sie den Sättigungsunterschied zwischen beiden und verwenden Sie
saturate. - Berechnen Sie die Helligkeitsunterschiede zwischen beiden und verwenden Sie
brightness.
Da dies nicht von Hand zu erledigen ist, verwenden wir den WENIGER Präprozessor :
%Vor%Dies sollte nach meinem Verständnis funktionieren. Aber es ist nicht . Warum und wie funktioniert es?
Beispiel für das, was ich erreichen möchte
Betrachten Sie ein Symbol als Bild oder Element (Hintergrundbild, CSS-basierte Form usw.) mit jeder -Farbe und mit einer durch Transparenz definierten Form ( nicht ein rechteckiges Bild, das einfach überlagert werden konnte). Ich möchte, dass es komplett aus einer bestimmten Farbe mit CSS besteht (vermutlich unter Verwendung von filters ).
Ich plane, dies als WENIGER Mixin zu implementieren, das ein Farbargument benötigt, aber nur eine Anleitung für das Logik hinter den HSB-Funktionen ist genug.
4 Antworten
Ich habe manchmal versucht, das zu erreichen, was Sie wollen und nicht geschafft haben.
Sie haben sowieso eine Alternative, die Mischmodi verwenden:
Ich vermisse die Transparenzanforderung. Lass es uns erneut versuchen :-). Nachteil: Sie müssen das Bild 2 mal einstellen.
Ok; Nehmen wir an, das gewünschte Ergebnis ist: Sie haben ein Bild, das als Maske fungiert. Sie möchten diese Maske verwenden, um eine farbige Überlagerung über ein vorhandenes Bild festzulegen, aber Sie möchten, dass die Farbe in den CSS-Stilen angegeben wird, damit sie leicht bearbeitet werden kann.
Wenn es für Sie in Ordnung ist, die Bilder zu ändern, so dass der zu verwendende Kanal Helligkeit statt Alpha ist, kann das folgende Beispiel Ihre Lösung sein Sie benötigen einen Filter mit grauen und schwarzen Farben, so
Sie müssen einen SVG-Filter erstellen, der durch einen CSS-Filter referenziert wird, um sich diesem zu nähern. Es ist keine echte Overlay-Mischung - das erfordert einen Mischmodus. Aber ich denke, es bringt dich wirklich, was du willst. Bitte beachten Sie, dass die Farbtonrotation in Filtern grundsätzlich gebrochen ist - es ist nur eine Annäherung im RGB-Raum, die gesättigte Farben SEHR falsch bekommt. (Es verwendet tatsächlich die ursprüngliche SVG-Filter-Mathematik unter der Decke).
Ich habe Fortschritte in der Mathematik gemacht, aber sie sind nicht hübsch; Idealerweise glaube ich, dass jede Farbe höchstens in den folgenden CSS-Filtern dargestellt werden kann:
%Vor% Mit anderen Worten, idealerweise sollten wir in der Lage sein, jede Farbe als Farbton-, Sättigungs- und Helligkeitskoordinaten relativ zu Sepiagrau ( #AC9977 ) auszudrücken.
Obwohl ich immer noch keinen Weg fand, dies zu tun (und ich bin mir sicher, dass es möglich ist), gelang es mir, eine Implementierung zu machen, die jeden Farbton von reinen Farben (R, G, B, C, M, Y) oder jede neutrale Farbe (weiß, schwarz und grau). Einige sind optimiert (wie schwarz ist nur brightness(0) ). Wenn die von Ihnen angegebene Farbe Transparenz aufweist, wird diese Transparenz außerdem als opacity -Filter hinzugefügt.
Dies ist der Code soweit (geschrieben in LESS ):
%Vor%Wenn Sie damit spielen wollen, hier ist ein Codepen (es kompiliert automatisch weniger).
Beachten Sie, dass dies nicht gut genug ist, und wenn Sie eine bessere Antwort posten (einschließlich einer anderen Methode, um das Problem zu lösen), kann ich Ihre akzeptieren und meine eigenen nicht akzeptieren, es sei denn, sie kann eine bestimmte Farbe darstellen (was es derzeit nicht kann; und ich habe es jetzt vielleicht aufgegeben).
Tags und Links css3 image-manipulation hsv color-space css-filters