CSS3滤镜在Opera、Internet Explorer和Mozilla Firefox上不起作用。

Question

CSS有一个名为filter的命令，它有许多功能示例：

  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(1);
  filter: contrast(1);
  filter: blur(0px);

支持Chrome 18+，Safari 6+的滤镜。（来源：http://css3.bradshawenterprises.com/filters/）

我需要使用grayscale, sepia, saturate, brightness, contrast, blur。但由于一些浏览器（ie、mozilla、opera）不支持filter，我无法使用任何一个功能。

我的问题：也许这些功能有替代品或其他方式可以获得类似的结果，如：grayscale, sepia, saturate, brightness, contrast, blur？

我尝试过添加前缀：-moz-, -o-, -ms-

从微软官方网站的示例中找到了一些东西，但是并没有起作用 :/（来源：http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx），像这样：

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
        progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); width=50%

有趣的是，我找到了针对Internet Explorer 6、7、8的解决方案（来源：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/），我尝试在我的Internet Explorer 11上测试它，但它没有起作用。代码：

filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */

我需要找到一个能够在Mozilla、Opera和Internet Explorer上运行的解决方案，至少需要支持最新版本。

- Asker

---

筛选器是IE的专属功能，它在其他浏览器中永远永远不会起作用。 - Teo

Opera支持带有“-webkit-”前缀的过滤器。我正在使用Opera浏览器，这个演示对我来说运行良好。 - Harry

Teo，我的过滤器在Chrome和Safari上有效，但在IE、Mozilla和Opera上无效。 - Asker

@Teo：多年来，它一直是IE专有的，直到SVG WG决定将SVG滤镜移植到CSS，这就是这个问题所涉及的。-ms-filter仍然是IE专有的，但我相信他们迫不及待地想要放弃它，转而使用SVG滤镜。 - BoltClock

我也遇到了这个问题，而且筛选器在IE上能够正常工作。你解决了吗，@Asker？谢谢。 - Ana DEV

Answer 1

据我所知，CSS滤镜效果在IE浏览器中直到IE v11仍不被支持。火狐浏览器有部分支持。Opera v24及以上版本使用-webkit-前缀可以完全支持。详情请参见：http://caniuse.com/#search=filter。

- Zack

---

也许Opera还可以，但基本问题在于Internet Explorer和Mozilla.. - Asker

Answer 2

火狐浏览器: 根据MDN的说法，不带前缀的支持将在Firefox 34中推出 (目前稳定版本为32)。在接下来的几周内，如果我理解正确，您需要使用url()获取SVG过滤器。

注意：如果您支持Firefox ESR - 扩展支持版本 - 它可能会被许多IT部门和组织部署，那么Fx 24 ESR将在2014年10月之后停止支持，但我想Fx 31 ESR将持续到2015年中期或年底。(来源)

- FelipeAls