毛玻璃效果是一種磨砂玻璃的視覺效果,可以使圖像變得模糊,從而提高用戶體驗(yàn)。在CSS中,我們使用filter屬性來實(shí)現(xiàn)毛玻璃效果。
.blur { filter: blur(10px); }
在上面的代碼中,我們將.filter的元素的濾鏡設(shè)置為blur(10px)。blur函數(shù)指定模糊半徑,這里的10px指模糊半徑為10像素。
如果想要在應(yīng)用毛玻璃效果的同時保留圖片的透明度,可以使用backdrop-filter屬性。backdrop-filter屬性與filter屬性類似,但后者作用于元素本身,而前者作用于元素周圍的內(nèi)容。
.blur { backdrop-filter: blur(10px); }
同樣地,我們可以設(shè)置blur的值來指定模糊半徑。但需要注意的是,backdrop-filter的瀏覽器支持性較差,目前僅有少數(shù)瀏覽器支持。
毛玻璃效果可以用于許多場景,例如背景圖片、對話框、彈出式菜單等。通過使用CSS濾鏡,我們可以輕松地實(shí)現(xiàn)這一效果。