CSS 滤镜 : backdrop-filter

早在iOS7刚发布的时候，我就试图在网站上加上iOS7上类似的毛玻璃效果，结局当然是没成功。

不过也找到了一些东西，我们知道使用filter: blur(10px);来达到高斯模糊的效果，但这种滤镜只能对添加此滤镜的元素生效，而影响不到元素下层的其它元素，因此也就没有办法实现毛玻璃效果，当时找到了一个项目，是一个对某一区域实时生成快照的Javascript库（具体的已经忘了，应该是Javascript库），然后我们就可以对快照添加高斯模糊滤镜，以此实现毛玻璃效果。可想而知，这样做效率是很低下的，所以最终只能放弃（其实懒到连尝试都没尝试）。

而现在，我们有了backdrop-filter！不过别高兴的太早。。

兼容性

backdrop-filter现在的支持范围极其有限，目前支持的可以说只有Safari浏览器：

Safari 9+及Safari Mobile 9.2+，也就是OS X 10.11+及iOS 9+上的Safari浏览器支持。其它的，Chrome 47+ 及 Chrome For Android 51+（及其它使用此内核的浏览器）可以到Chrome - Flags: chrome://flags/#enable-experimental-web-platform-features中开启「实验性网络平台功能」以获得支持。

可以到Can I Use中查看更为详细的浏览器支持情况。

目前 Chrome 上会有些 Bug，而Safari则会好上很多，看图就知道了：

Safari上的效果（同样的代码）：

可以说任重而道远啊。。不过总算有点盼头了不是么。

滤镜效果

backdrop-filter与filter的区别就是filter是对添加此滤镜的元素生效，无法应用到其下层元素，而backdrop-filter则刚好相反，其是对添加此滤镜的元素的下层元素的快照添加滤镜，因此可以很方便的实现毛玻璃效果。

backdrop-filter可以使用的滤镜主要有：

<url>
blur()            /* 高斯模糊 */
brightness()    /* 亮度 */
contrast()        /* 对比度 */
drop-shadow()    /* 阴影 */
grayscale()        /* 灰度 */
hue-rotate()    /* 色相旋转 */
invert()        /* 反色 */
opacity()        /* 透明度 */
sepia()            /* 褐色 */
saturate()        /* 饱和度 */

使用

backdrop-filter的使用和filter一样，如：

.element {
    background-color: rgba(255, 255, 255, 0.3);
    /* 目前 Safari 系浏览器仅支持 -webkit-backdrop-filter */
    -webkit-backdrop-filter: brightness(150%) blur(30px);
    backdrop-filter: brightness(150%) blur(30px);
}

而鉴于目前支持设备的有限，我们可以使用@supports来为不同的设备添加不同的效果：

/* 默认情况下的样式，如：不支持 backdrop-filter 甚至不支持 @supports 的情况下 应用此效果 */
.element {
    background-color: #fff;
}
@supports (-webkit-backdrop-filter: brightness(150%) blur(30px)) or (backdrop-filter: brightness(150%) blur(30px)){
    /* 支持 backdrop-filter 时应用的效果，记得把一些属性覆盖掉 */
    .element {
        background-color: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: brightness(150%) blur(30px);
        backdrop-filter: brightness(150%) blur(30px);
    }
}

对于其它的滤镜效果你可以自行折腾查看。

演示

如果你的浏览器支持，那么你应该可以在本页面看到一个有毛玻璃特效的顶部悬浮条，如果没有。。。那么就参考前面兼容性一节开启特性支持或更换其它浏览器查看吧~

最后再放张图片，你好好体会一下~