css - 跨浏览器图像 CSS 过滤器

Question

我在使用 FireFox 中的图像过滤器时遇到问题。我有这段代码:

-webkit-filter: grayscale(0.5) sepia(0.3);

它适用于 Chrome 和 Opera

我知道它适用于 FF 和其他流行的浏览器。

我发现了这个:

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.3333 0 0.3333 0.3333 0.3333 0.3333 0 0.3333 0.3333 0.3333 0.3333 0 0 0 0 0 1\'/></filter></svg>#grayscale");

但我不明白它是如何工作的。

谢谢你帮助我。

Answer 1

转到 draft filters spec查看这些 CSS 过滤器的 SVG 过滤器等价物是什么。