纯 CSS 毛玻璃特效 - backdrop-filter 属性介绍

几年前的 iOS、MacOS 更新以後，毛玻璃视觉效果越来越受到许多人喜爱，在使用毛玻璃以前，背景与主要的画面区块的风格整合是一件麻烦的事情，除了画面的协调性外，还要维持资讯的传达性。而毛玻璃可以让背景的画面雾化，凸显上层的主要资讯，并让背景与整体不致於产生冲突感。

网页在套用毛玻璃的特效流程近年有大幅的简化，过去在线上有介绍过 纯 CSS 的毛玻璃的技法，是透过多层的伪元素搭配 filter 的模糊效果完成，开发的程序码繁杂，运作上也有许多的限制。不过在 2019 推出了新的 CSS 语法，毛玻璃的特效仅需要一个短短属性就可达成，让我们一起来看看怎麽做吧。

这是本文会使用到的图片，图片来自於 Unsplash，如果失连欢迎与我联络。

伪元素 + Filter 的做法

在新的语法推出以前，纯 CSS 制作毛玻璃特效仅有此方法，原理：

1. 将上层区块中加入一个与背景相同的图片
2. 上层区块内的图片尺寸需超过该区块
3. 将区块内的图片转为模糊

原始码及说明：

.filter.box {
  position: relative;
  /* 裁切多余区域 */
  overflow: hidden;
  /* 加入 z-index，区块内的文字才能正确显示 */
  z-index: 1;
}
.filter.box:after{
  content: "";
  background-position: center center;
  background-size: cover;
  position: absolute;
  /* 图片需超过外层的区块 */
  top: -30px;
  bottom: -30px;
  left: -30px;
  right: -30px;
  background-image: url(https://images.unsplash.com/photo-1602251627070-6a9bab4e420e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80);
  /* 加入模糊 */
  filter: blur(5px);
  z-index: -1;
}

运作范例（本文实际运范例可参考）：

这个手法两层的图片必须完全相同，所以作为背景的区块无法有任何的其它元素。

backdrop-filter，一行就能搞定

在 Chrome 76 版加入的新属性 backdrop-filter，此属性能够将区块内的背景统一加入特效，此语法就不需要用到伪元素，仅需要短短的一行即可搞定。

范例程序码（就这样而已）：

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

实际范例，不管背景图如何，区块内的 backdrop-filter 都能够将背景加入特效（本文实际运范例可参考）。

backdrop-filter 具有许多特点，除了能够将图片加上特效外，更严格来说它是将整个区块的下层加上特效，只要在套用的区块下都能运作。以下范例来说，於底部加上了一段文字，在 hover 後的视觉效果也能套用 backdrop-filter 的特效（在此使用 invert）。

<style>
.backdrop-invert {
  transition: 1s all;
}
.backdrop-invert:hover {
  background-color: rgba(0, 0, 0, .25);
  backdrop-filter: invert(80%);
}

更多 backdrop-filter

backdrop-filter 除了毛玻璃以外，亦有包含非常多的特效（就如同 Photoshop 一样），语法列表如下：

• blur: 模糊（毛玻璃就是你～）
• brightness: 明度
• contrast: 对比度
• drop-shadow: 阴影
• grayscale: 灰阶
• hue-rotate: 色相
• invert: 反转
• opacity: 透明度
• sepia: 棕褐色
• saturate: 饱和度

这里也提供简单的工具，便於大家浏览所有的特效效果（本文实际运范例可参考）。