使用CSS的跨浏览器图像灰度

Question

灰度效果在firefox中效果不佳，所以我正在使用它。

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

但应用此CSS后，firefox显示错误无法加载图像。 我在旋转滑块中应用此效果，其中任何图像都不存在。

Answer 1

这是旧的，但我遇到了同样的问题，并在他们的开发者网站上找到了它，它对我有用：

filter: grayscale(100%);

以下是指向其网站的链接：https://developer.mozilla.org/en-US/docs/Web/CSS/filter