CSS模糊背景效果是一種很有趣的效果，它可以讓頁面看起來更加清新、舒適。當你需要強調頁面中的某一部分時，使用模糊背景效果可以使其更容易被用戶注意到。

.blur-background {
position: relative;
overflow: hidden;
background: url(./bg.jpg) center center no-repeat;
background-size: cover;
}
.blur-background::before {
content: "";
position: absolute;
z-index: -1;
top: -10%; right: -10%;
bottom: -10%; left: -10%;
background: inherit;
filter: blur(10px); /* 調整模糊程度 */
}

上面的代碼展示了如何使用CSS實現模糊背景效果，先設置一個外層容器，然后設置其背景圖片。再通過偽元素before在容器上添加一個背景色相同，但是模糊程度較大的層，使得整個容器看起來模糊。

通過適當調整模糊程度，可以使得背景看起來更加柔和自然。這種效果在圖片、標題等位置使用非常合適，可以為整個頁面增添一份優美的修飾。