CSS3过滤器与Firefox和Chrome之间的区别

我正在制作跨浏览器的图像效果,但不同浏览器的效果却截然不同.我认为过滤器值是问题所在.这是代码.

CSS

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.85 0.85 0.85 0 0 0.85 0.85 0.85 0 0 0.85 0.85 0.85 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(85%);
    -webkit-filter: grayscale(85%);
}
div {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" x=\"-2%\" y=\"-2%\" width=\"104%\" height=\"104%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\"/></filter></svg>#svgBlur");
}

HTML

<div><img src="http://www.presidiacreative.com/wp-contenthttp://img.558idc.com/uploadfile/2012/04/interior-design-22.jpg" /></div>

这是jsFiddle

最后,这是截图(左：Firefox 25,右：Chrome 31).

注意：目标浏览器支持：Chrome 30,Firefox 20,Safari 6,IE7

我不确定我在FF中得到的结果与在Chrome中的结果相同,但是我展示了方式,你最终可以设置精细调整.

灰度滤镜通过从原始颜色中获取颜色并将其置于其他颜色中,对颜色分布求平均值.

要将其设置为低于100％,您需要在原始颜色中保留更大比例的颜色.

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\
     '1   0.6  0.6  0 0 
      0.6 1    0.6  0 0 
      0.6 0.6  1    0 0 
      0   0    0    1 0\'/></filter></svg>#grayscale");
    filter: grayscale(85%);
    -webkit-filter: grayscale(85%);
}

在这个矩阵中,我将对角线值增加到1,并将其他值降低到0.6.如果你想保持原始颜色更多,降低0.6值,但保持对角线1不变

另一方面,我降低了模糊量.使用stdDeviation值播放

div {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" x=\"-2%\" y=\"-2%\" width=\"104%\" height=\"104%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"4\"/></filter></svg>#svgBlur");

}

demo

一个更好的解决方案

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.5 0.3 0.3 0 0 0.3 0.5 0.3 0 0 0.3 0.3 0.5 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(85%);
    -webkit-filter: grayscale(85%);
}
div {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" x=\"-2%\" y=\"-2%\" width=\"104%\" height=\"104%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\"/></filter></svg>#svgBlur");
}

demo 2

计算矩阵的公式是.非对角线值灰度百分比/ 3.在您的情况下,0.85 / 3 = 0.28.对角线值,前一个(1 – 百分比).在你的情况下0.28(1 – 0.85)= 0.43.