CSS Backdrop-filter

朦朧

Backdrop-filter 與 filter

Filter

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

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

Backdrop-filter

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

Backdrop-filter 應用

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

進一步研究

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

總結

總結來說，還不錯省了很多麻煩事，不然以前只能仰賴 JS 去做這件事情。
另外這個 css 功能很早就發布了，但是一直到最近瀏覽器才開始支援，在此分享給有這樣開發需求的前端工程師們！