跨浏览器图像CSS过滤器

我在FireFox中的图像过滤器有问题。我有这样的代码：跨浏览器图像CSS过滤器

-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");

，但我不anderstand它是如何工作的。

感谢您的帮助。

来源

2014-01-08 Cloudswalker

我觉得这个回答可以帮助你。 http://stackoverflow.com/questions/17517306/css3-firefox-filter-grayscale-without-blur-effect-matrix – Fox

不，它没有帮助...我需要50％的灰度和30％的棕褐色。但在这个链接的例子只是模糊效果。我不需要那个。但感谢您的帮助。 – Cloudswalker

转到draft filters spec以查看这些CSS滤镜的SVG滤镜等效项。

来源

2014-01-09 21:25:55

这是帮助，但它只适用于灰度：\t'filter：url（“data：image/svg + xml; utf8， Cloudswalker

，我不知道如何使用它们 – Cloudswalker

我在这个网站找到答案。并帮助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和DIV的背景图像在CSS

来源

2014-01-10 13:20:54 Cloudswalker

跨浏览器图像CSS过滤器

回答

相关问题