3

我正在使用这个 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，没有一个工作。

我现在需要一些建议，因为我的想法已经用完了......

4

3 回答 3

6

IE10 或 Firefox (v.23) 不支持 CSS3 过滤器，并且在不久的将来对这些浏览器的支持是未知的。

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

您可以使用 Modernizr 来检查 CSS 过滤器是否支持，如果不支持则回退到背景图像。

于 2013-08-25T01:11:06.527 回答
2

您也可以使用 svg 过滤器，但不能在 Firefox 和 ie10 上为它们设置动画。

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

于 2013-12-09T13:05:58.807 回答
1

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

于 2015-05-12T12:07:52.237 回答