用CSS實現高斯模糊背景效果

高斯模糊是一種常見的效果（俗稱毛玻璃效果），在CSS中使用filter、backdrop-filter屬性均可實現。

這里主要介紹簡單的方式：backdrop-filter: blur();

---

 

簡介：

backdrop-filter 是使透過該層的底部元素模糊化

backdrop-filter屬性可以讓你為一個元素后面區域添加圖形效果（如模糊或顏色偏移）。

因為它適用於元素 背后 的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

backdrop-filter目前兼容性不佳，尤其是安卓移動端

blur()使得出現毛玻璃效果，只會模糊背景

.showStyle::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(31, 33, 41, 0.4);
    z-index: -1;
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
}
.showStyle {
    width: 200px;
    height: 100px;
    position: relative;
}

詳細屬性請查看：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter（一定瞄幾眼）