Question

最近我网站上的Grayscacle效果（DezinoGraphist.com）突然停止工作。 CSS代码为特定部分（关联）的所有项目添加了灰度效果，直到您将它们悬停在它们上面，然后这些项目定期变为彩色。

它工作了很长时间但现在突然停止工作了。我什么都没改变。以下是CSS代码供参考：

img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
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 10+, Firefox on Android */
}

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

希望这是非常小的。

Answer 1

尝试在html过滤器svg中放置一些地方：

<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>

然后在你的css中使用过滤器ID：

filter: url('#grayscale');

Answer 2

谢谢Devian。使用SVG过滤器就可以了。它起作用了:)）

CSS灰度过滤器突然停止工作

2 个答案: