CSS3新属性backdrop-filter:在网页中实现实时毛玻璃效果

发布于 2017-02-02  518 次阅读


平时大家在浏览网站的时候,也许会遇到一些网站做出一些很漂亮的毛玻璃效果,比如哔哩哔哩弹幕视频网顶栏的毛玻璃效果。

不过他们的毛玻璃效果不是实时毛玻璃效果,所以他们的顶栏只能固定在页面的最上面,而今天我们要讨论的是实时毛玻璃效果。而这个效果只需要CSS的一个属性backdrop-filter就能实现。

然而浏览器对这个属性的支持不是很好,我们可以在这里查看各种浏览器对backdrop-filter的支持情况。可以看到IE11和Edge不支持,Firefox不支持,Chrome要启用实验性网络平台功能才能支持,Safari只需要加-webkit-前缀就可以用了。

在这里,我就用Chrome 56版本来演示一下实时毛玻璃是什么样子的。

首先,我们在Chrome的地址栏里输入chrome://flags/#enable-experimental-web-platform-features后按回车。

点击“启用”,然后重新启动Chrome。

然后我们再找一个网站来做演示,我就选择百度吧,因为百度在搜索结果里的顶栏始终保持在页面可见范围的最上面。

我们按一下F12,然后在Elements选项卡里选择这个id为head的div。

然后在右边的style选项卡里,把#head中的background属性改为rgba(255,255,255,0.2)。

然后新增属性backdrop-filter,属性值为blur(2px)。

然后,搜索结果的顶栏神奇地变成了透明又带有毛玻璃效果的样子。

不论我们怎么滑动,顶栏下面的内容始终是模糊的,这就是真正的实时毛玻璃效果。


高三党|ACG|可能是未来的程序员|在等毕业……