CSS Backdrop-filter 與 filter差異

通常要製造毛玻璃背景效果，會很麻煩的去使用偽元素before來去修飾單一圖層，達到毛玻璃的高斯模糊效果。

Filter

會發現，它其實就只是修飾這個元素下面底層元素其實是沒有關係的，如果要做到移動就會非常麻煩。

Backdrop-filter

但 backdrop-filter 則剛好相反，是對添加此濾鏡的元素的下層元素的快照添加濾鏡

Backdrop-filter 應用

這樣只要一張背景圖就可以做到各種上層濾淨效果

進一步研究

其實會發現 Backdrop-filter並不會對本身的元素做出濾淨效果，下面可以清楚看到，圖片下方下層元素被濾鏡而原始的圖片卻沒有。

總結

總結來說，還不錯省了很多麻煩事，不然以前只能仰賴 JS 去做這件事情。
另外這個css 功能很早就發布了，同事無意間看到最近瀏覽器開始支援了就分享給出來。