跨浏览器图像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过滤器等价物。

Answer 2

我在这个网站上找到了答案。并通过Michael Mullany帮助。

.element { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.8179 0.2307 0.0567 0 0 0.1047 0.9058 0.0504 0 0 0.0816 0.1602 0.7393 0 0 0 0 0 1 0\'/></filter></svg>#old-timey"); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.6063 0.3576 0.0361 0 0 0.1063 0.8576 0.0361 0 0 0.1063 0.3576 0.5361 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); } 它适用于FireFox和CSS中的div背景图像