CSS3 Firefox滤镜灰度没有模糊效果矩阵

Question

我现在有下面的代码来灰度化我的图像（在这里找到的stackoverflow）。问题是这也影响了图像。我想要一个矩阵，只将颜色调整为灰度，而不改变图片的模糊程度。

CSS代码：

filter: url(svg/filters.svg#grayscale); 
filter: gray; /* IE6-9 */ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
-webkit-filter: grayscale(100%); /* Google Chrome & Safari 6+ */ 

Answer 1

尝试使用filterRes属性播放时，它定义了中间图像的

宽度和高度，以像素

并且可以具有急剧影响图像质量。看到这个例子：

http://jsfiddle.net/Jxtjt/

<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Example.png'> 

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' filterRes='600'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
} 
img:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale' ><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); 
} 

原来的过滤器上的HI采用了filterRes设置600像素，这看起来不错，至少在我显示，它可能看起来在其他显示器不同，也许特别是-DPI。将鼠标悬停在图像上以查看正在应用的过滤器，但未设置filterRes属性。

根据您的使用情况，这可能是您的一种解决方法。

对我来说，这看起来像一个Firefox中的错误（你可能想要提交一个bug report）。根据规格，用户代理负责计算输出设备上看起来不错的值，以防未设置，所以也许这就是Firefox出错的地方，不确定。