CSS blur filter not working in Firefox and IE 10, any alternatives?

问题

I'm using this CSS code for blur effect:

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

and the blur is working fine in Chrome, but nothing happens in Firefox or IE 10.

I also tried this example http://jsbin.com/ulufot/31/edit but for IE 10, none worked.

I need some advice at this moment, because I'm runing out of ideas...

回答1:

CSS3 filters are not supported in IE10 or Firefox (v.23), and support is unknown for those browsers in the near future.

Have a look: http://caniuse.com/#feat=css-filters

You could use Modernizr to check for CSS filter support and fallback to a background image if not supported.

回答2:

You can also use svg filters but you cant animate them atm on firefox and ie10.

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

回答3:

I thought I'd share my solution to this issue. My low-tech solution is to force load the img at very low resolution i.e. width=20px and then stretch the image to fit the inside of a div. IE will stretch the image and blur the image.

来源：https://stackoverflow.com/questions/18424647/css-blur-filter-not-working-in-firefox-and-ie-10-any-alternatives