Question

CSS有 过滤器 命令，它有很多功能示例：

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

我需要使用灰度，棕褐色，饱和度，亮度，对比度，模糊。我不能使用这些，因为很少有浏览器（即mozilla，opera）不支持过滤器

我的问题：也许这些功能有替代品或其他东西来获得类似的结果，如：灰度，棕褐色，饱和度，亮度，对比度，模糊

我尝试的是什么：添加前缀：-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%

有趣的是什么。我找到了互联网资源管理器的解决方案：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上运行的解决方案，至少使用最新版本

Answer 1

http://caniuse.com/#search=filter

据我所知，IE IE中不支持CSS过滤效果，直到IE v11。 Firefox有部分支持。 Opera v24及更高版本完全支持-webkit-前缀。

Answer 2

Mozilla Firefox ：support without prefix is coming in Firefox 34 according to MDN（目前稳定版本为32）。几个星期，如果我理解的话，你需要通过url（）来获得SVG过滤器。

注意：如果您支持可能由多个IT部门和组织部署的Firefox ESR - 扩展支持版本，2014年10月之后将不再支持Fx 24 ESR，但Fx 31 ESR将在2015年中期或2015年底之前完成我猜。（source）

CSS3过滤器不适用于Opera，Internet Explorer，Mozilla Firefox

2 个答案: