So berechnen Sie den gewünschten Farbton-drehen, um zu generieren bestimmte Farbe?
Habe ich ein weißes Bild, dass ich als hintergrund für ein div, und ich würde gerne in der Farbe der Designs Hauptfarbe. Ich bin mir bewusst, das ich tun kann:
filter: sepia() saturate(10000%) hue-rotate(30deg);Zyklus und durch hue-rotate zu finden, eine Farbe, aber ist es möglich zu berechnen, diesen Wert im Voraus? Gegeben, dass der angegebene hex-Wert ist ziemlich dunkel, ich Stelle mir vor ich muss die invert(%) gefiltert werden.
Gegeben, einen hex-Wert von #689d94 was Mathe muss ich tun, um zu berechnen, den gewünschten hue-rotate und invert zu konvertierenden Wert meiner weißen hintergrund-Bild in der gleichen Farbe?
Bearbeiten
Hier ist ein Ausschnitt von einem div mit einem weißen hintergrund Bild gefiltert wird grün. Der trick hier ist es die ganze div, die gefiltert wird, nicht nur die Bild. Wenn ich geben Sie text in das div den text Farbe grün als gut.
CSS:
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}HTML:
<div>
</div>- Ja, es ist eine tatsächliche hintergrund Bild.
- Dann (wieder AFAIK)..das ist nicht möglich, Filter angewendet werden, um die tatsächlichen Bilder.
- Welche Einschränkungen sind Sie imposant in dieser Frage? Ich denke, das könnte mehr oder weniger erreichbar mit filter: url(#mySvgFilter). Das würde erfordern, können Sie entweder ein svg-element irgendwo auf der Seite oder eine SVG-Dateien irgendwo. Wäre das eine praktikable Lösung? Seltsam genug, ich konnte nicht die Farbe exakt übereinstimmen (obwohl Sie sollte), wenn der Farb-Matrizen, aber das wäre mir Missverständnis etwas im Zusammenhang mit den Füllmethoden. Auch, wenn ich Fragen darf, was ist die darunterliegende problem, das Sie lösen möchten?
- Ursprünglich war ich versucht, um die Anzahl von http-Anfragen, die ein Benutzer benötigen würde, um durch den Einsatz von nur einem svg-Bild (der Korb wurde an anderer Stelle verwendet wird auf der Seite) und ich wollte nur, um die Farbe zu ändern mit CSS. Letztlich habe ich am Ende mit zwei anderen Bildern (eins für die dunkelgrünen, oben, und einmal in schwarz), aber dies ist immer noch eine Frage, ich bin auf der Suche nach einer Antwort auf. Für Einschränkungen - ich bin auf der Suche nach einer Reihe von Schritten oder ein Verfahren, dem ich Folgen kann, dass, wenn eine hex-Eingabe, gibt mir eine Liste der Filter und der Werte, die ich brauche, zu verwenden, um die Farbe meiner weißen Bild.
- Ist es möglich eine inline-svg-filter?
- Wenn Sie inline-svg-Sie werden in der Lage sein, es zu ändern Attribute, wie Farben und Größe etc.. css-tricks.com/using-svg
- Yup. Aber ich bin daran interessiert, dass die svg als background-image. Plus ich bin echt daran interessiert, wenn die oben genannten möglich ist, wie dies in der Frage.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den Schlüssel in diesem Fall ist zu definieren, die eine erste Farbe. Weiß noch schwarz oder alle in Graustufen ist technisch eine tatsächliche Farbe - können Sie nicht zu sättigen oder zu drehen. Sie haben zu "Kolorieren" es irgendwie, und die sepia-filter ist der einzige filter, die irgendeine form von einfärben.
Wäre es einfacher, wenn Ihr Bild war ein reines 100% rot. Dann könnte man einfach das Ziel nicht Grad direkt und passen Sie die Sättigung und Helligkeit mittels HSL für den Gegner. Für eine weiße Farbe Startpunkt der erste Schritt ist, zu konvertieren und legen Sie eine Zwischenfarbe, so können wir sättigen, und drehen Sie es später.
Können zuerst verdunkeln das weiße Bild und anwenden sepia zu bekommen, eine "Basis" Farbe, die wir können mit der Arbeit:
Diese produzieren RGB-Farbwert von ungefähr:
Schritt zwei ist konvertieren, dass zu HSL-Farbraum - die uns:
Grundfarbe Ergebnis
CSS:
HTML:
Konvertierung von Basis-Farbe, Ziel-Farbe
Diese beiden ersten Schritte sind statisch, und das Ergebnis wird wiederverwendet werden jedes mal, wenn wir brauchen ein Ziel-Anpassung (der tatsächliche Wert des sepia definiert wird, in der SVG-Filter-Spezifikation).
Nun müssen wir berechnen, was wir benötigen, um an dieser Grundfarbe zu bekommen, Ziel-Farbe. Zuerst konvertieren, Ziel-Farbe, zum Beispiel #689d94 wie in der Frage, HSL:
Dann haben wir zur Berechnung der Differenz zwischen diesen. Farbton errechnet sich einfach durch die Subtraktion von base vom Gegner. Das gleiche für die Sättigung und die Helligkeit, aber da wir davon ausgehen 100% des Basiswertes müssen wir subtrahieren das Ergebnis von 100%, um am Ende mit einem diff die kumulierten Werte:
Konvertieren Sie diese Werte für einen filter-string durch anfügen an die vorhandenen filter, dann legen Sie es auf den div:
Und Sie würde wahrscheinlich so etwas wie diese Annahme, filter und div sind bereits erklärt:
Beachten Sie, dass es ist wahrscheinlich ein Rundungsfehler als RGB dargestellt als integer, während die HSL ist floating point, also das tatsächliche Ergebnis kann nicht genau sein, aber es sollte ziemlich nah.
Live-Beispiel
CSS:
HTML:
Gangbare alternative Optionen sind:
Die akzeptierte Antwort ist falsch. Hue-rotate nicht sparen, Sättigung oder Helligkeit, und Sie haben zu tun, verrückt Mathematik zu kommen mit den richtigen Werten. Der weitaus einfachere Weg - der führt zu einem korrekten Ergebnis zu tun, die die CSS-filter, der auf einen SVG-filter. Die feColorMatrix primitiven SVG-Filter " können Sie eine Farbe auswählen, die direkt - wie so. Nehmen Sie Ihre Farbe #424242 - teilen Sie jede Farbe hex-Wert von #FF (.257) und setzen Sie diese in die fünfte Spalte, die ersten drei Zeilen der Farbmatrix. Etwa so:
CSS:
HTML:
Wenn svg verwendet werden, dann ...
Öffnen können Sie svg-Dateien mit einem text-editor kopieren und einfügen in html-Datei dann Pfad ändern, Farbe als erforderlich.
Im folgenden Beispiel-code... ich habe den Pfad geändert, die Farbe der Mitte ring.
Hoffe, das hilft..
JS:
HTML:
Hintergrund Bild
JS:
CSS:
HTML: