MENU

CSS 滤镜 : backdrop-filter

• July 14, 2016 • Read: 57312 • 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. @(汗)

  2. 哈哈 我也就看看

  3. themebetter.com 博客导航已收录贵站,期待博主分享更多的精彩内容。

  4. themebetter.com 博客导航已收录贵站,期待博主分享更多的精彩内容。

  5. @(滑稽)日常留言

    1. @krag大水比@(喷)

    2. @Hran我反正觉得十五字什么的最适合我@(阴险)

    3. CSD CSD

      @krag要水去水楼@(滑稽)

    4. @CSD@(喷)

    5. @CSD我觉得hran应该建个水页,专供水经验。

    6. @Hran@(滑稽)少喝点