У меня есть изображение, имеющее простой красный цвет, # FF0000. Моя цель – изменить его на # 1100FF.
Всего пару недель назад я узнал, что у нас есть функция tinting / filtering в CSS3. Он работает очень хорошо, однако конечный цвет изображения не # 1100FF. Я проверяю цвет через Chrome Tool «Awesome Color Picker»
Итак, как я это делаю, вы должны спрашивать.
function RGB_TO_HSV($R, $G, $B) // RGB values: 0-255, 0-255, 0-255 { // HSV values: 0-360, 0-100, 0-100 $HSL = array(); // 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; } Затем в CSS я делаю это:
img {-webkit-filter: hue-rotate(<?=$HSL['H']?>) saturate(<?=$HSL['S']?>) brightness(<?=$HSL['V']?>);}
Теперь, пожалуйста, скажите мне, как я могу достичь требуемого цвета? Нужно ли добавлять или вычитать исходный цвет (т. Е. # FF0000), чтобы получить желаемый цвет или код, который я использую, неверен или что?
Цвет вывода: # 0F2DFF
Изменить: нет ограничений на цвет изображения # FF0000. Я могу изменить его, пока я точно могу покрасить изображение на любой цвет.
Кажется, это ошибка webkit или css: https://code.google.com/p/chromium/issues/detail?id=237524 или, по крайней мере, математическое преобразование позади нее не так прямолинейно, как прямое изменение оттенка. Это легко увидеть в этом примере:
<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>
Демо-версия
Поэтому я не думаю, что пока невозможно преобразовать один цвет в другой без какой-либо безумной обратной инженерии алгоритма webkit.
Я согласен с Джорамом. Он работает не так, как ожидалось.
Мой лучший друг – это методы CSS-форм. Я сделал фигуры в css и покрасил его в то, что мне понравилось, и это было идеально. Хотя это занимает некоторое время, но это стоило того и многоэффективно, чем тратить время на методы фильтрации.
Я устал от полувыпеченных стандартов. : (