Свойство веб-фильтра CSS3-фильтра

У меня есть изображение, имеющее простой красный цвет, # 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. Я могу изменить его, пока я точно могу покрасить изображение на любой цвет.

    Related of "Свойство веб-фильтра CSS3-фильтра"

    Кажется, это ошибка 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 и покрасил его в то, что мне понравилось, и это было идеально. Хотя это занимает некоторое время, но это стоило того и многоэффективно, чем тратить время на методы фильтрации.

    Я устал от полувыпеченных стандартов. : (