1.毛玻璃

.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.5);z-index: 10;width: 100%;height: 100%;backdrop-filter: blur(10px); //毛玻璃特效}

下面我們可以看看效果：

?可以看見登錄頁后面的背景都加上了一層模糊，這就是毛玻璃效果。

2.模糊濾鏡

接下來，我們來看看模糊濾鏡，加入下列css屬性：

.dialog {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.5);z-index: 10;width: 100%;height: 100%;// backdrop-filter: blur(10px); //毛玻璃特效filter: blur(10px); // 模糊濾鏡}

可以看見此時背景并沒有變，而登錄頁發生了模糊變化，這就是兩者的區別了，大家可以根據情況酌情使用哦。

總結

以上是生活随笔為你收集整理的css常用（2）：毛玻璃 、模糊滤镜的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。