模糊圖像是我網站上的主要美學功能之一。到目前爲止,我正在使用CSS3濾鏡blur()來創建模糊,但我知道這在Firefox和Internet Explorer中都不受支持。我想知道是否有替代方案,也許JavaScript/jQuery,這將幫助我創建我期待的模糊效果?如何在不支持CSS3過濾器的瀏覽器中模糊圖像
0
A
回答
0
有很多很多模糊的圖像JS庫。
無論如何,如果你正在使用一個靜態的模糊圖像(即無需unblur /再次進行模糊處理),我說你應該使用正常的位圖圖像。這可能有助於避免瀏覽器不必要的CPU負載和兼容性問題。
0
看看blur.js,一個jQuery插件,爲你做的竅門。實質上,它所做的就是將圖像移動到<canvas>
,並在那裏進行模糊效果。查看關於該主題的更全面的文章:Effects for the Web!。
0
這是可能的使用JavaScript。看看這個:http://www.blurjs.com
另一個真棒腳本是模糊的:https://github.com/GianlucaGuarini/vague.js 爲例,看看這裏:http://codepen.io/GianlucaGuarini/pen/Hzrhf
相關問題
- 1. 如何檢測瀏覽器是否支持CSS3模糊?
- 2. CSS3佈局模塊瀏覽器支持
- 3. CSS跨瀏覽器過濾器模糊不工作在Firefox
- 4. Chrome瀏覽器的模糊SVG圖像
- 5. 移動瀏覽器對CSS3的支持
- 6. 瀏覽器上的CSS3支持
- 7. 檢測瀏覽器與Modernizr支持css3
- 8. 什麼瀏覽器支持HTML 5/CSS3
- 9. 跨瀏覽器圖像CSS過濾器
- 10. 在不受支持的瀏覽器中使用CSS3 3d變換
- 11. CSS3過濾器不會在Opera,IE瀏覽器,Mozilla Firefox瀏覽器工作
- 12. 如何檢測IE瀏覽器中的HTML5和CSS3支持?
- 13. 如何在瀏覽器上模糊圖像?
- 14. 過濾掉瀏覽器沒有GZIP支持與mod_deflate模塊
- 15. 瀏覽器不支持幀
- 16. 瀏覽器支持
- 17. Entypo在瀏覽器中不支持
- 18. 瀏覽器不支持谷歌地圖
- 19. 如果瀏覽器支持
- 20. 支持JS支持的Python瀏覽器模擬器
- 21. 使用不受支持的瀏覽器[HTML5/CSS3]
- 22. 瀏覽器支持WebDriver還是WebDriver支持瀏覽器
- 23. 如何從瀏覽器中排除不支持瀏覽器的插件
- 24. 不支持邊框圖像的瀏覽器的後備背景
- 25. CSS3的「move-to」/ content:pending(...)是否支持任何瀏覽器?
- 26. @import的瀏覽器支持
- 27. 過濾器爲Android瀏覽器的「視圖圖像」
- 28. 字體在Safari瀏覽器中模糊
- 29. 如何檢測瀏覽器是否支持webkit瀏覽器?
- 30. 我如何添加一個過濾器圖像(模糊)
這將是一個來自外部來源的動態圖像,所以我唯一的前進方向恐怕是Javascript/jQuery。我一定會看看上面的內容,他們看起來像他們會做的工作! –
@JamesWalker似乎合法。祝你的項目好運:)如果有任何答案在這裏幫助你,請將它標爲正確! – skz