使用背景幕滤镜制作操作系统风格的背景

元素后的模糊和颜色偏移。

Adam Argyle
Joe Medley
Joe Medley
GitHub
半透明、模糊和其他效果有助于营造深度，同时让背景内容与背景融为一体。它们支持各种用例，例如磨砂玻璃、视频叠加层、半透明的导航标题、不当的图片审查、图片加载等。这些特效可能会在 Windows 10 和 iOS 这两个常用的操作系统中辨别。

磨砂玻璃效果示例。
毛玻璃效果示例。来源。

过去，这些技术很难在网络上实施，所需的黑客手段或变通方案并不完美。近年来，Safari 和 Edge 都通过 background-filter（或者 -webkit-backdrop-filter）属性提供这些功能，该属性会根据过滤器函数动态混合前景色和背景色。现在，Chrome 支持 background-filter（从版本 76 开始）。

backdrop-filter 的过滤器函数演示。请在 CodePen 上试用该示例。

浏览器支持

浏览器支持

  • 76
  • 79
  • 103
  • 9

来源

出于性能原因，如果 backdrop-filter 不受支持，请回退到使用图片，而非 polyfill。下面的示例显示了这种情况。

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

基础配置

  • backdrop-filter 属性可对元素应用一个或多个滤镜，从而更改元素后面的所有内容。
  • 叠加元素必须至少部分透明。
  • 叠加元素将获取新的堆叠上下文。

CSS backdrop-filter 会对半透明或透明的元素应用一种或多种效果。要了解这一点，请参考以下图片。

无前景透明度
一个叠加在圆圈上的三角形。无法通过三角形看到圆圈。 
.frosty-glass-pane {
  backdrop-filter: blur(2px);
}
前景透明度
一个叠加在圆圈上的三角形。三角形是半透明的，可让玩家透过它看到圆圈。 
.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

左图显示了在不使用或不支持 backdrop-filter 的情况下，重叠的元素会如何渲染。右侧的图片使用 backdrop-filter 应用模糊效果。请注意，除了 backdrop-filter 之外，它还使用了 opacity。如果没有 opacity，就没有可应用模糊处理的对象。毫无疑问，如果将 opacity 设置为 1（完全不透明），则对背景没有任何影响。

backdrop-filter 属性与 CSS 过滤器类似，都支持您常用的所有过滤器函数：blur()、brightness()、contrast()、opacity()、drop-shadow() 等。如果您想使用外部图片作为过滤条件，它还支持 url() 函数以及关键字 none、inherit、initial 和 unset。MDN 上提供了对以上各项的说明，包括语法、过滤条件和值的说明。

当 backdrop-filter 设置为 none 以外的任何值时，浏览器会创建新的堆栈上下文。您也可以创建包含块，但前提是相应元素具有绝对位置和固定位置的后代。

你可以组合使用各种滤镜来实现丰富而巧妙的效果，也可以只使用一种滤镜来实现更精细或更精确的效果。您甚至可以将它们与 SVG 滤镜结合使用。

示例

以前为操作系统预留的设计技术和样式现在性能出色，并且只需一个 CSS 声明即可实现。我们来看一些示例。

单一过滤条件

在以下示例中，通过将颜色和模糊效果相结合来实现磨砂效果。模糊效果由 backdrop-filter 提供，颜色来自元素的半透明背景颜色。

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}
请在 CodePen 中亲自试用此示例。

多个过滤条件

有时，你需要使用多个滤镜才能达到想要的效果。为此，请提供以空格分隔的过滤条件列表。例如：

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

在以下示例中，四个窗格分别具有不同的背景幕滤镜组合，而同一组形状在它们后面呈现动画效果。

在 CodePen 中亲自试用此示例。

叠加层

下例展示了如何对半透明背景进行模糊处理，让文字清晰易读，同时在风格上与网页背景融为一体。

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}
请自行试用此示例。

动态背景上的文字对比度

如前所述，backdrop-filter 可实现在网页上难以实现或无法实现的效果。例如，更改背景以响应动画。在此示例中，尽管文本后面发生了更改，backdrop-filter 仍会保持文本与其背景之间的高对比度。它以默认背景颜色 darkslategray 开始，并在转换后使用 backdrop-filter 反转颜色。

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}
不妨在 Codrops 中试试 Chen Hui Jing 的这个例子。

总结

在过去几年中，超过 560 家用户赞了 Chromium 错误，这明显是备受期待的 CSS 功能。Chrome 发布的 backdrop-filter（版本 76）使网络更接近真正类似于操作系统的界面呈现方式。

其他资源