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

Question

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

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-content/uploads/2012/04/interior-design-22.jpg" /></div>

以下是jsFiddle

最后，这是截图（左：Firefox 25，右：Chrome 31）。

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

Answer 1

不幸的是，Firefox 25目前不支持大多数CSS3过滤器。

This link表明大多数目标浏览器都没有！

Answer 2

我不确定我在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。

Answer 3

正如@kmoe所说，您的目标浏览器不支持此功能，即使执行结果的浏览器也可能有所不同，因此您最好的解决方案是使用透明模糊图像作为原始图像的掩码。看看是否有帮助：）