CSS3 Firefox 滤镜灰度无模糊效果矩阵答案

【问题标题】：CSS3 Firefox filter grayscale without blur effect matrixCSS3 Firefox 滤镜灰度无模糊效果矩阵
【发布时间】：2013-07-08 08:59:15
【问题描述】：

我现在拥有的是以下代码来对我的图像进行灰度化（在 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+ */

【问题讨论】：

标签： css firefox filter

【解决方案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 设置，至少在my 显示器上看起来不错，但在其他显示器上可能看起来不同，尤其是在 HI-DPI 显示器上。将鼠标悬停在图像上可查看在未设置 filterRes 属性的情况下应用的过滤器。

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

在我看来，这看起来像是 Firefox 中的一个错误（您可能需要提交bug report）。根据规范，用户代理负责计算在输出设备上看起来不错的值，以防它们没有设置，所以也许这就是 Firefox 出错的地方，不确定。

【讨论】：