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

Question

拥有模糊图像是我网站上的主要美学特征之一。到目前为止，我使用CSS3 filter blur（）创建模糊，但我知道Firefox和Internet Explorer都不支持。我想知道是否有替代品，可能是JavaScript / jQuery，这将帮助我创建我想要的模糊效果？

Answer 1

查看jQuery插件blur.js是否适合您。从本质上讲，它的作用是将图像移动到<canvas>，并在那里产生模糊效果。请参阅有关该主题的更全面的文章：Effects for the Web!。

Answer 2

这可以使用javascript。看看这个：http://www.blurjs.com

另一个很棒的剧本含糊不清：https://github.com/GianlucaGuarini/vague.js 例如，看看这里：http://codepen.io/GianlucaGuarini/pen/Hzrhf

Answer 3

有很多JS库可以模糊图像。

• BlurJS
• VagueJS
• StackBlur Algorhythm

无论如何，如果您使用的是静态模糊图像（即，无需再次展开/模糊它），我会说您应该使用正常的位图图像。这可能有助于避免浏览器上不必要的CPU负载和兼容性问题。