木是伊说 - css
type: channel
link: http://static.wiseclock.ca/tag/css/
items: Webkit新特性Backdrop-filter試玩

Webkit新特性Backdrop-filter試玩
type: item
date: 2016-02-22T07:12:00+00:00
description: 昨天想要做個透過透明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