IMG模糊效果可以用CSS實現,這是一種美化圖片的良好方法。以下是如何使用CSS將圖像模糊化的簡單步驟。
.blur{ filter: blur(5px); /*模糊度,可以根據需要進行調整*/ -webkit-filter: blur(5px); /*Safari瀏覽器*/ }
如上所示,可以使用filter屬性,并將其設置為blur函數,該函數的參數為模糊度。 如果想要其他瀏覽器(例如Safari)兼容性,可以使用-webit-filter。
此外,該方法也支持動畫效果。以下是一個簡單的CSS動畫示例:
.blur:hover{ filter: blur(0); /*用于動畫的停止效果*/ transition: all 0.5s ease; /*時間間隔為0.5s */ }
如上所示,在:hover偽類中,我們將模糊度設置為0,然后使用CSS過渡屬性將其過渡為0.5秒。 相應地,您可以根據需要調整過渡時間和效果。
在這里,關于圖像模糊化使用的CSS是非常簡單的,您可以使用非常簡單的代碼輕松實現圖像模糊效果。