CSS 在保持內容清晰度的同時對背景圖像進行模糊處理

嘗試在CSS 設定中模糊背景圖像時，通常會遇到內容（文字或其他元素）也變得模糊的問題。這就是 z-index 和偽元素的概念發揮作用的地方。

要模糊背景圖像而不影響內容，可以採用以下方法：

1. 創建背景容器：將背景圖像包含在div或其他容器中並為其分配一個類，例如"blur-bgimage."
2. 引入偽元素： 在“blur-bgimage”類中，添加一個偽類，如:before。這將在容器後面建立一個繼承背景圖像的圖層。
3. 模糊背景：使用 CSS 濾鏡將模糊效果套用至偽元素。這將模糊繼承的背景圖像而不影響內容。
4. 覆蓋內容：將內容放置在「blur-bgimage」容器中，確保其具有更高的z-index（例如, z-index: 1) 比模糊背景(z -index: 0).

下面有一個例子代碼：

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

透過實施此方法，您可以有效地模糊背景圖像，同時保持內容的清晰度，從而實現具有視覺吸引力的網站設計。