CSS可以幫助我們實現各種特效,其中之一就是背景模糊。背景模糊可以讓頁面看起來更加美觀,也有助于提高用戶體驗。
/* 創建背景圖片 */
body{
background-image:url("bg.jpg");
background-size:cover;
background-position:center;
}
/* 使用backdrop-filter屬性實現高斯模糊 */
.blur{
backdrop-filter: blur(10px);
}
要實現背景模糊,我們需要先設置一個背景圖片。可以使用background-image屬性,將圖片地址設置為背景。同時,還需設置background-size和background-position,來調整圖片的顯示方式及位置。
接下來,我們需要使用CSS提供的backdrop-filter屬性來實現高斯模糊。backdrop-filter屬性是用于向元素后面添加特效的屬性,包括模糊、色彩變換、透明度等。
在我們的例子中,我們使用blur函數實現模糊。blur函數所接收的值表示模糊半徑,值越大,則模糊程度越高。
這樣,我們就完成了背景模糊的實現。當我們需要讓頁面背景模糊時,只需要在HTML文件中添加一個類名為blur的元素即可。