1

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

1 回答 1

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 中的错误（您可能需要提交错误报告）。根据规范，用户代理负责计算在输出设备上看起来不错的值，以防它们没有设置，所以也许这就是 Firefox 出错的地方，不确定。

于 2013-07-08T00:11:25.050 回答