CSS backdrop-filter简介与苹果iOS毛玻璃效果

这篇文章发布于 2019年11月15日,星期五,00:51,归类于 CSS相关。 阅读 61338 次, 今日 9 次 30 条评论

 

一、故事的开始

6年前,iOS7刚出来时候,出现了下图所示的毛玻璃效果。

毛玻璃效果

这种效果和我们平常的高斯模糊不同,不是当前元素模糊,是当前元素所在的背景后面的内容模糊。

当时我绞尽脑汁思考该如何实现这个效果,如果只是单纯一张图片,那还有方法可以实现。但是如果是不规律的布局或者动态内容,那真的是捉襟见肘,无能为力,望洋兴叹了。

后来,过了两年,iOS9支持了一个CSS属性,名为backdrop-filter,可以非常方便的实现毛玻璃效果。但是,只有iOS支持,Chrome并不支持,也就意味着Android不支持,PC和移动双杀,也就意味着这个特性不可能在实际项目中使用,于是,无人问津,凄凄惨惨戚戚。

让我们目光再回到现在,前段时间啊,也就个把月之前,出现了一个重大的转机,那就是Chrome76+版本浏览器开始原生支持backdrop-filter属性了。Firefox70+ 在about:config中开启layout.css.backdrop-filter.enabled也可以支持,开启实验属性支持通常也意味着不久也会默认支持。

backdrop-filter兼容性

于是乎,CSS backdrop-filter开始在实际项目中粉墨登场,大放异彩,熠熠生辉,那已经是板上钉钉,毫无疑问,确凿无疑的事情了。

是时候好好了解一下这个CSS属性了。

二、了解CSS背景滤镜backdrop-filter

有人说backdrop-filterfilter的语法类似。错!不是类似,是一模一样,如出一辙,毫无二致。

看下面的对比表:

backdrop-filter语法 filter语法
/* 关键字值 */
backdrop-filter: none;

/* URL方式外链SVG filter */
backdrop-filter: url(zxx.svg#filter);

/* <filter-function>值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);
/* 关键字值 */
filter: none;

/* URL方式外链SVG filter */
filter: url(zxx.svg#filter);

/* <filter-function>值 */
filter: blur(2px);
filter: brightness(60%);
filter: contrast(40%);
filter: drop-shadow(4px 4px 10px blue);
filter: grayscale(30%);
filter: hue-rotate(120deg);
filter: invert(70%);
filter: opacity(20%);
filter: sepia(90%);
filter: saturate(80%);

各个滤镜方法对应含义如下表:

滤镜 释义
blur 模糊
brightness 亮度
contrast 对比度
drop-shadow 投影
grayscale 灰度
hue-rotate 色调变化
invert 反相
opacity 透明度
saturate 饱和度
sepia 褐色

然后各个滤镜大致效果可以参见之前这篇文章:“FDCon2019大会分享之滤镜与混合模式实录”,这里就不一一展示了,唯一需要演示的就是文章一开始提到的毛玻璃效果。

backdrop-filter和filter区别

backdrop-filter是让当前元素所在区域后面的内容模糊灰度或高亮之类,要想看到效果,需要元素本身半透明或者完全透明;而filter是让当前元素自身模糊灰度或高亮之类。

我们来通过毛玻璃效果的案例来感受一下backdrop-filter的实际效果。

三、backdrop-filter与毛玻璃效果

案例一:弹框毛玻璃

您可以狠狠地点击这里:弹框背景毛玻璃demo

点击按钮,会打开一个弹框:

点击按钮出现弹框

其中,弹框增加了下面这段CSS:

dialog {
    -webkit-backdrop-filter: blur(5px);	
    backdrop-filter: blur(5px);	
}

结果黑色半透明背景后面的内容都模糊了:

背景模糊效果示意

这种模糊与背景的半透明度没有任何关系,例如,我们修改背景色透明度较低,甚至完全透明,后面内容依然是模糊状态:

透明度降低之后的效果

案例二:下拉毛玻璃

我们以前实现下拉效果,下拉层一定会有一个实色背景,就像下面这样的:

实色背景示意

现在有了backdrop-filter,我们实现的效果可以一下子变得非常高大上了,就像下面这样:

下拉列表与背后的模糊

透出模糊的背后元素,在web中不太常见的毛玻璃就横空出世,应运而生,跃然纸上。

您可以狠狠地点击这里:下拉毛玻璃效果demo

实现非常简单,只要把下拉容器原来的实色background-color变成半透明,再设置一个backdrop-filter blur()模糊就可以了:

.ui-droplist-x {
    background: hsla(0, 0%, 100%, .75);
    -webkit-backdrop-filter: blur(5px);    
    backdrop-filter: blur(5px);    
}

就这么简单,赶快自己在自己的项目中用起来吧,渐进增强使用。

.some-class-zxx {
    background-color: #fff;  
}
@supports (-webkit-backdrop-filter:none) or (backdrop-filter:none) {
    .some-class-zxx {
        background: hsla(0, 0%, 100%, .75);
        -webkit-backdrop-filter: blur(5px);    
        backdrop-filter: blur(5px);   
    }
}

不影响老代码,全新的浏览器又有高大上的效果,只要不是非常大开销的页面,都可以非常愉快、快乐,开心地使用起来。

四、厨二病下的结语

结语没什么好说的,放一组老师的截图吧。

我们无法一起学习 我们无法一起学习 我们无法一起学习 我们无法一起学习

并不算特别好的番,比较低龄,纯粹是为了素材,如封面之类看看的。

10月番看得进去的也就《平均值凤傲天》,《慎勇表情包女神》,《纯情狼小兔兔》了。

欢迎同道中人互相交流。

(本篇完)

分享到:


发表评论(目前30 条评论)

  1. lemon说道:

    前两天刚遇到一个高斯模糊的需求,然后就是backdrop-filter一顿捯饬

  2. 小路说道:

    filter性能不太好,特别是在页面滚动的时候,不知道backdrop-filter相比较filter会有更好的性能表现吗?

  3. hueng说道:

    爱了爱了

  4. 吴同学说道:

    元素设置backdrop-filter后,子元素的position:fixed不再基于浏览器窗口定位而是基于这个元素定位了,但是还是会固定在页面上,不跟随浏览器的滚动条滚动,就很坑==

  5. zhangdi说道:

    目前发现在父级设置毛玻璃后,子孙级再设置不起作用,请问有办法解决吗?

    • xw说道:

      遇到相同问题,需要使用伪元素解决父子嵌套问题,参考这个解决办法https://stackoverflow.com/questions/63907743/parent-element-backdrop-filter-does-not-apply-for-its-child

  6. evin说道:

    旭哥,为什么在浏览器输入的时候会提示backdrop-filter: aliceblue;这种语法,但是又报错。

  7. Hooray说道:

    搭配transition使用的时候,在动画过度中四边blur的效果有明显区别,但动画结束后直接恢复正常,效果有点怪异

  8. 米天逸说道:

    大佬,我发现 backdrop-filter 似乎会造成严重的性能问题。我在页面上多放几个毛玻璃块,chrome 浏览器下测试页面滚动,就能发现明显的卡顿。请问这个有啥解决办法吗?

    • 小路说道:

      使用filter我也遇到了同样的问题,使用transform: translate3d(0, 0, 0);开启硬件加速后,会有改善

    • 小路说道:

      根据我的实际测试,在同样开启硬件加速的前提下,backdrop-filter的性能差于filter,在mac上特别明显,使用了backdrop-filter的元素,滚动时会重新渲染

  9. ameng说道:

    同在追纯情狼小兔兔~还有冰海战记星合之空小英雄等等等等…

  10. MO说道:

    东西是好东西,兼容确是个大问题,另外,渲染需要的计算量估计比较大,动画毛玻璃时卡顿可以说很明显了

  11. 喵帕斯说道:

    超喜欢看,特别是鬼灭之刃O(∩_∩)O哈哈~

  12. 五A五A说道:

    双十一已经买新书但当当还没发货。。。
    高分少女2也不错呀!

  13. CodeHz说道:

    这个属性其实有很多bug(在chrome上),比如有段时间会无视border-radius,然后开overflow: hidden则效果消失;扩展过滤效果到任何突出内容(包括box-shadow,和超出范围的内部子元素;以及在(Android)移动端应用时导致webview对应区域变成透明或者花屏(如果开了硬件加速);以及至今80版本仍然没有修复的大范围模糊时偶尔出现虚假阴影的问题。。。。
    总之这玩意就是大坑(

  14. 风海流说道:

    原来张老师也喜欢看《纯情狼小兔兔》!
    握爪

  15. LeonZou说道:

    我们无法一起学习!!!!!!!!!!!!!!!我超爱这部漫画

  16. xianrongbin说道:

    张老师,你是从什么网站知道 这些新的实验属性呢?

  17. cshenger说道:

    我们无法一起学习,哈哈,原来大佬是老师党,我文乃党路过路过

  18. 奥兰度说道:

    毛玻璃好评,回头自己写的一些小Demo可以改改了。顺便鑫旭大佬不看看Trigger社的新作吗?听说挺不错的

  19. 后脑勺说道:

    可以,这个效果确实挺漂亮的。但是,上班族表示在工作中效果都是由 UI 定的,他们不会用这种的,可惜😭

    • 孙老四说道:

      不用觉得可惜。日常多积累,小笔记做好就行了。
      UI要是给你乱“定”效果,兼容性能整死你。

  20. 晚风说道:

    很强,快快支持

  21. 快乐小神童说道:

    配图好评,嘿嘿

  22. 忧郁的风说道:

    之前在项目中试了试感觉还不错
    我也在看这3个番,真是在忙碌而又枯燥的生活中带来了期待和温馨