MENU

CSS 滤镜 : backdrop-filter

• July 14, 2016 • Read: 65252 • Codes

早在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-filterfilter的区别就是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);
    }
}

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

演示

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

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

Last Modified: January 31, 2023
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

49 Comments
  1. hhh hhh

    现在终于等到了 ciu一片绿@(小乖)

  2. hong hong

    www.apple.com.cn 顶部导航栏 就是这种效果,chrome PC 及 iphone 都实现了。

  3. 唉,不兼容。

  4. 请问你的代码高亮用的是什么插件,哪一款?

  5. @(怒)