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

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

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

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

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

1 个答案: