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

原始滤镜使用600像素的filterRes设置，至少在我的显示器上看起来不错，在其他显示器上可能看起来有所不同，尤其是在HI-DPI显示器上。 将鼠标悬停在图像上可查看未设置filterRes属性的情况下应用的过滤器。

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

在我看来，这看起来像是Firefox中的错误（您可能要提交错误报告 ）。 根据规范，如果未设置值，则用户代理负责计算在输出设备上看起来不错的值，所以也许这就是Firefox出错的地方（不确定）。