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

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

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

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

过去，这些技术在 Web 上很难实现，需要使用不太完美的黑客攻击或权宜解决方法。近年来，Safari 和 Edge 都通过 background-filter（或者 -webkit-backdrop-filter）属性提供这些功能，该属性会根据过滤器函数动态混合前景色和背景色。现在，从 Chrome 76 版开始，Chrome 支持 background-filter。

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

浏览器支持

浏览器支持

  • Chrome：76.
  • Edge：79。
  • Firefox：103。
  • Safari：18.

来源

出于性能原因，如果 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 支持在 Web 上难以实现或无法实现的高性能效果。例如，根据动画更改背景。在此示例中，尽管文本后面发生了更改，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 在 76 版中发布了 backdrop-filter，使 Web 应用更接近于真正类似于操作系统的界面呈现。

其他资源