Proprietà del filter Webkit CSS3

Ho un'image che ha un semplice colore rosso, # FF0000. Il mio objective è cambiarlo in # 1100FF.

Solo un paio di settimane fa ho capito che abbiamo la possibilità di tingere / filtrare nei CSS3. Funziona piuttosto bene, tuttavia il colore finale dell'image non è # 1100FF. Controllo il colore tramite lo strumento Chrome 'Awesome Color Picker'

Quindi come lo faccio è quello che devi chiedere.

function RGB_TO_HSV($R, $G, $B) // RGB values: 0-255, 0-255, 0-255 { // HSV values: 0-360, 0-100, 0-100 $HSL = arrays(); // Convert the RGB byte-values to percentages $R = ($R / 255); $G = ($G / 255); $B = ($B / 255); $maxRGB = max($R, $G, $B); $minRGB = min($R, $G, $B); $chroma = $maxRGB - $minRGB; $computedV = 100 * $maxRGB; if ($chroma == 0) { $HSL['H']= "0deg"; $HSL['S']= "0%"; $HSL['V']= (3*$computedV)."%"; return $HSL; } $computedS = 100 * ($chroma / $maxRGB); if ($R == $minRGB) $h = 3 - (($G - $B) / $chroma); elseif ($B == $minRGB) $h = 1 - (($R - $G) / $chroma); else // $G == $minRGB $h = 5 - (($B - $R) / $chroma); $computedH = 60 * $h; $HSL['H'] = $computedH."deg"; $HSL['S'] = $computedS."%"; $HSL['V'] = $computedV."%"; return $HSL; } 

Quindi in CSS, lo faccio:

 img {-webkit-filter: hue-rotate(<?=$HSL['H']?>) saturate(<?=$HSL['S']?>) brightness(<?=$HSL['V']?>);} 

Ora per favore dimmi come posso get il colore richiesto? Devo aggiungere o sottrarre il colore originale (es. # FF0000) per get il colore desiderato o il codice che sto usando non è corretto o cosa?

Il colore di output è: # 0F2DFF

Modifica: non vi è alcuna restrizione sul fatto che il colore dell'image sia # FF0000. Posso cambiarlo fintanto che posso colorare l'image con qualsiasi colore in modo preciso.

Sembra essere un bug webkit o css: https://code.google.com/p/chromium/issues/detail?id=237524 o alless la trasformazione math dietro di esso non è così semplice come lo spostamento diretto della tonalità. Questo può essere facilmente osservato in questo esempio:

 <div style="width: 200px; height: 100px; color:#333; background-color: hsl(100,100%,50%)">Original</div> <div style="width: 200px; height: 100px; color:#333; background-color: hsl(200,100%,50%)">Expected</div> <div style="width: 200px; height: 100px; color:#333; background-color: hsl(100,100%,50%); -webkit-filter: hue-rotate(100deg);">Filtered</div> 

Dimostrazione dal vivo

Quindi non penso sia ancora ansible trasformare precisamente un colore in un altro senza un pazzo reverse engineering dell'algorithm del webkit.

Sono d'accordo con Joram. Non funziona come previsto.

Il mio migliore amico erano le tecniche di forms CSS. Ho creato forms nel css e lo ho colorato a qualsiasi cosa mi piacesse ed era pixel perfetto. Anche se ci vuole del tempo ma ne è valsa la pena e molto più efficace di perdere tempo con le tecniche di filtraggio.

Sono stanco degli standard semi-cotti. : (