CSS灰度滤镜突然停止工作答案

【问题标题】：CSS grayscale filter suddenly stopped workingCSS灰度滤镜突然停止工作
【发布时间】：2016-09-28 21:20:57
【问题描述】：

最近我的网站 (DezinoGraphist.com) 上的 Grayscacle 效果突然停止工作。 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");
}

希望这是很小的事情。

【问题讨论】：

请添加一个最小、完整和可验证的示例，另见stackoverflow.com/help/mcve

标签： css image webkit grayscale

【解决方案1】：

尝试在 html filter 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');

【讨论】：

【解决方案2】：

谢谢德维安。放置 SVG 过滤器就可以了。成功了:)

【讨论】：