MENU

CSS 滤镜 : backdrop-filter

• July 14, 2016 • Read: 49508 • 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: April 15, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

49 Comments
  1. 返回顶部按钮按住不动的话,会出现一个短暂的方形。。。。我换成你的主题啦,真赞。

    1. @krag手机吗?那个大概是选中状态,我看看能不能把他干掉

    2. @Hran电脑,点住不动就短暂出现,然后就返回顶部了。

    3. @krag是什么浏览器?

    4. @HranFirefox Developer Edition

    5. @krag奇怪。。我这边倒是都没有问题。。。

    6. @Hran如果能截图的话,我就截图了@(滑稽)

  2. ....我

    1. @krag看来不是这样发的泡泡表情

    2. @krag这样输入:

      \[滑稽\]

      记得去掉反斜线

    3. @Hran@(滑稽)

    4. @krag@(乖)@(哈哈)@(汗)@(勉强)@(吐舌)@(阴险)@(滑稽)

    5. @Hran这个是主题自带的功能么

    6. @Hran@(乖)

    7. @krag不是。。。因为我没钱为你们提供表情图。。。不过可以教你怎么弄

    8. @Hran哈哈,我懂,那你教我吧@(乖)

    9. @krag你加我QQ吧

    10. CSD CSD

      @Hran噫 我也要一个@(滑稽)

    11. @CSD那你加我QQ吧。。

  3. @(滑稽)

    1. @yufan@(阴险)