如何在不支持 CSS3 過濾器的瀏覽器中模糊圖像

Question

圖像模糊是我網站上的主要美學特征之一。 到目前為止，我使用 CSS3 filter blur() 來創建模糊，但我知道 Firefox 和 Internet Explorer 都不支持。 我想知道有沒有替代方案，也許是 JavaScript/jQuery，它可以幫助我創建我正在尋找的模糊效果？

Answer 1

看看blur.js （一個 jQuery 插件）是否適合你。 本質上，它所做的是將您的圖像移動到<canvas> ，並在那里進行模糊效果。 請參閱有關該主題的更全面的文章： Web 效果！ .

Answer 2

使用javascript可以實現。 看看這個： http : //www.blurjs.com

另一個很棒的腳本是模糊的：例如， https ： //github.com/GianlucaGuarini/vague.js ，請看這里： http : //codepen.io/GianlucaGuarini/pen/Hzrhf

Answer 3

有很多 JS 庫可以模糊圖像。

• 模糊JS
• VagueJS
• StackBlur 算法

無論如何，如果您使用靜態模糊圖像（即，無需再次取消模糊/模糊），我會說您應該使用普通位圖圖像。 這可能有助於避免瀏覽器上不必要的 CPU 負載和兼容性問題。