昨天想要做個透過透明DIV對下層DIV使用滾動條的效果的時候無意間發現了一枚好東西，Webkit的新特性「Backdrop-filter」。它可以對任意在其下面（z-index）的圖層（包括動態圖片、視頻等）使用濾鏡特效（filter），而不像現在僅有背景濾鏡、圖片濾鏡以及顏色濾鏡而已。

不過因為這個特性還處於開發階段，默認只有使用Webkit Nightly Build的瀏覽器才可優先體驗。但其實它已經被多個版本的Webkit所包含了，詳情見：Can I Use。

iOS Safari 9.2及以上已經可以直接使用-webkit-backdrop-filter實現效果了——這也是解了我一惑，前段時間看到忘了是啥日報之類的網頁，底端居然像iOS dock一樣有毛玻璃效果，很是驚奇，現在想來肯定是-webkit-backdrop-filter沒跑了……

普通版本的Chrome若想開啟這個功能，進入設置頁面將其啟用並重啟瀏覽器即可。（注：不支持-webkit-前綴，只有直接使用backdrop-filter時才能見到效果）

我也用它簡單地做了一個演示，玩了一會兒……

See the Pen GobQjR by Wise Clock (@WiseClock) on CodePen.

想了解詳情可以去官方說明博客或去官方演示頁面欣賞OwO