CSS 实现毛玻璃效果 | backdrop-filter与filter的区别

CSS 毛玻璃效果是一种使用 CSS 创建的视觉效果，可以使元素或区域呈现出模糊或半透明的外观，就像毛玻璃一样。

示例：

<div class="container">
  <div class="textHolder">
    <p>glass</p>
  </div>
</div>

.container {
  width: 532px;
  height: 300px;
  background-image: url(../shanshui.jpg);
  background-position: center;
  background-size: cover;
  margin: 30px;
}
.textHolder {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  width: 300px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 30px;
  color: red;
}

在以上代码中我们创建了一个container容器，并设置背景图，将一个宽高分别为300px,150px的元素放在容器正中央，效果如下图所示：

其中p元素为：

我们要制作毛玻璃效果，需要使用backdrop-filter属性，为p元素设置：

p {
  backdrop-filter: blur(10px);
}

最终效果：

backdrop-filter与filter的区别

依旧是上方容器，我们添加两个元素，两个元素均分高度：

<div class="container">
  <p>我是backdrop-filter</p>
  <span class="child">我是filter</span>
</div>

效果如下图所示：

分别为两个元素设置 backdrop-filter与filter样式，代码如下：

p {
  backdrop-filter: blur(10px);
}

.child {
  filter: blur(2px);
}

最终效果如下图所示：

可以看到backdrop-filter为元素后方区域（包括后方的元素）设置了模糊；而filter则只为元素本身（对后方区域或其他元素无效果)设置了模糊。

常用滤镜属性如下所示：

.css {
  /* <filter-function> 滤镜函数值 */
  backdrop-filter: blur(2px);
  // 模糊效果，值越大越模糊
  
  backdrop-filter: brightness(60%);
  // 调整亮度，值越大越亮
  
  backdrop-filter: contrast(40%);
  // 调整对比度，默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度
  
  backdrop-filter: drop-shadow(4px 4px 10px blue);
  // 添加阴影，为图像添加阴影效果，参数说明如下：
  // 参数依次为drop-shadow(h-shadow v-shadow blur spread color)
  // h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧；
  // v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方；
  // blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值；
  // spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小；
  // color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色。

  backdrop-filter: grayscale(30%);
  // 调整灰度，将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值
  
  backdrop-filter: hue-rotate(120deg);
  // 图像色相旋转，用来定义色环的度数，默认值为 0deg，代表原始图像，最大值为 360deg
  
  backdrop-filter: invert(70%);
  // 反转图像，默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值
  
  backdrop-filter: opacity(20%);
  // 不透明度，默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值
  
  backdrop-filter: sepia(90%);
  // 图像转为棕褐色, 默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值
  
  backdrop-filter: saturate(80%);
  // 调整饱和度，默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值

  /* 多重滤镜 */
  backdrop-filter: blur(4px) saturate(150%);
}