在網頁設計中，背景圖片是一個重要的設計元素。但有時候我們希望背景圖片能夠達到更好的視覺效果，比如模糊效果。今天我們就來學習一下如何使用CSS設置背景模糊。 首先，我們需要使用CSS的filter屬性來實現背景模糊效果。filter屬性是CSS3的一個新特性，可以為HTML元素添加各種視覺效果，包括模糊、旋轉、縮放等等。現在，我們只需要使用filter的模糊效果即可。 下面是一個簡單的例子，我們定義了一個id為blur的樣式，它的背景圖片為一個鳥的圖片，同時設置了模糊效果。

#blur {
background-image: url("bird.jpg");
filter: blur(5px);
}

在這個例子中，我們使用了blur函數來定義模糊效果的強度，設置為5px。這個函數的參數可以是px、em、rem等單位，表示模糊的程度。在這里，我們只需要根據實際需要調整數值即可。 當我們將這個樣式應用到HTML元素中時，就會產生背景模糊效果。下面是一個HTML頁面的例子：

這是一個背景模糊效果的Div

在這個例子中，我們定義了一個id為blur的div元素，并為它設置了背景圖片和模糊效果。當我們在瀏覽器中預覽頁面時，就會看到div元素的背景出現了模糊效果。 總而言之，背景模糊效果是一個非常簡單但又有效的設計元素。使用CSS的filter屬性可以輕松實現這個效果，同時可以根據實際需要調整模糊程度。希望這篇文章能夠幫助你實現你的設計目標！