CSS模糊滤镜在Firefox和IE 10中无效，是否有替代方案？

Question

我正在使用以下CSS代码实现模糊效果：

blur

.blur{
-webkit-filter : blur(5px);
-moz-filter    : blur(5px);
-o-filter      : blur(5px);
-ms-filter     : blur(5px);
filter         : blur(5px);
opacity        : 0.4      ;
}

blur 在 Chrome 中运行正常，在 Firefox 和 IE 10 中没有任何反应。

我还尝试了这个示例http://jsbin.com/ulufot/31/edit，但对于 IE 10 来说，都没有起作用。

此时我需要一些建议，因为我的思路已经耗尽了...

- derei

---

我想很抱歉地告诉你，Firefox仍然不支持CSS3滤镜 :( - Diosney

对于 FF，我可以使用基于 SVG 的滤镜（请参见我的问题中的链接）。但是，我仍然没有针对 IE 的工作解决方案。 - derei

IE10也支持SVG滤镜，但不支持非SVG内容。 - Michael Mullany

Firefox35 + 支持模糊属性。 - Chemical Programmer

Answer 1

CSS3过滤器在IE10或Firefox（v.23）中不受支持，而这些浏览器在不久的将来的支持情况是未知的。

看一下：http://caniuse.com/#feat=css-filters

您可以使用Modernizr检查CSS过滤器支持情况，并在不支持时回退到背景图像。

- micjamking

Answer 2

您也可以使用SVG过滤器，但目前在Firefox和IE10上无法对其进行动画处理。

http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

- Dtnand

---

你可以使用模糊效果结合父元素背景的伪元素，利用 -moz-element 和 SVG 滤镜来模拟淡化模糊效果。 - PythonNut

Answer 3

我想分享一下我的解决方案。我的低技术解决方案是强制以非常低的分辨率加载img，即width=20px，然后将图像拉伸以适应div内部。IE会拉伸并模糊图像。

- Kristian Svensson