昨天想要做個透過透明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