CSS3 Webkit-过滤器属性 [英] CSS3 Webkit-filter Property
问题描述
我有一个图像是纯红色,#FF0000。我的目标是将它更改为#1100FF。
I have got an image that has got plain red color, #FF0000. My target is to change it to #1100FF.
只是几个星期前我知道我们在CSS3有着色/过滤功能。它的工作相当不错,但图像的最终颜色不是#1100FF。我通过Chrome工具Awesome颜色选择器检查颜色
Just couple of weeks ago I get to know that we have tinting/filtering capability in CSS3. It works pretty good however final color of the Image is not #1100FF. I check color through Chrome Tool 'Awesome Color Picker'
那么我该怎么做是你一定要问的。
So how I do it is what you must be asking.
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中,我这样做:
Then In CSS, I do this:
img {-webkit-filter: hue-rotate(<?=$HSL['H']?>) saturate(<?=$HSL['S']?>) brightness(<?=$HSL['V']?>);}
现在请告诉我如何实现所需的颜色?我需要添加或减去原始颜色(即#FF0000)以获得所需的颜色或我使用的代码不正确或什么?
Now please tell me how I can achieve the required color? Do I need to add or subtract the original color (ie. #FF0000) to get the desired color or the code I am using is not correct or what?
输出颜色是:#0F2DFF
Output Color is : #0F2DFF
编辑:图像颜色没有限制#FF0000。
There is no restriction that color of the image is #FF0000. I can change it as long as I can tint the image to the any color accurately.
推荐答案
我同意Joram的看法。它不能按预期工作。
I agree with Joram. It is not working as expected.
我最好的朋友是CSS形状技术。我在css和颜色的形状,以任何我喜欢的,它是像素完美的。虽然它需要一些时间,但它是值得的,很多效率比浪费时间过滤技术。
My best friend was CSS shapes techniques. I made shapes in the css and color it to whatever I liked and it was pixel perfect. Though it take some time but it was worth it and lot effective than wasting time on filtering techniques.
我厌倦了半熟的标准。 :(
I am tired of half-baked standards. : (
这篇关于CSS3 Webkit-过滤器属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!