dongshun5963 2013-08-13 15:41
浏览 79
已采纳

CSS3 Webkit过滤器属性

I have got an image that has got plain red color, #FF0000. My target is to change it to #1100FF.

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;
                    }

Then In CSS, I do this:

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

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?

Output Color is : #0F2DFF

Edit: 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.

展开全部

  • 写回答

2条回答 默认 最新

  • douan3414 2013-08-23 02:43
    关注

    I agree with Joram. It is not working as expected.

    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. : (

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目
  • ¥30 海外项目,如何降低Google Map接口费用?
  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
  • ¥15 传人记程序做的plc 485从机程序该如何写
  • ¥15 已知手指抓握过程中掌指关节、手指各关节和指尖每一帧的坐标,用贝塞尔曲线可以拟合手指抓握的运动轨迹吗?
  • ¥50 libwebsockets 如何添加其他socket事件回调