如何在不支持 CSS3 过滤器的浏览器中模糊图像

Question

Having a blurred image is one of the main aesthetic features on my website. So far I am using CSS3 filter blur() to create the blur, but I know this is not supported in neither Firefox nor Internet Explorer. I was wondering is there an alternative, maybe JavaScript/jQuery, which will help me create the blurred effect I am looking for?

Answer 1

See if blur.js , a jQuery plugin, does the trick for you. Essentially, what it does is move your image to a <canvas> , and does the blurring effects there. See a more comprehensive article on the topic: Effects for the Web! .

Answer 2

That's possible using javascript. Check out this one: http://www.blurjs.com

Another awesome script is vague: https://github.com/GianlucaGuarini/vague.js for an example, have a look here: http://codepen.io/GianlucaGuarini/pen/Hzrhf

Answer 3

There are plenty of JS libraries that blur images.

• BlurJS
• VagueJS
• StackBlur Algorhythm

Anyway, if you're using a static blurred image (ie, no need to unblur/blur it again), I'd say you should go with a normal bitmap image. That might help to avoid unnecessary CPU load on the browser and compatibility issues.