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

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9078
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、故事的开始

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

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

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

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

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

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

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

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

有人说backdrop-filter和filter的语法类似。错！不是类似，是一模一样，如出一辙，毫无二致。

看下面的对比表：

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);   
    }
}

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