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

模糊处理元素后面的画面和颜色偏移。

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 bug 投票，这表明这项 CSS 功能是大家期待已久的。Chrome 发布的 backdrop-filter（版本 76）使网络更接近真正类似于操作系统的界面呈现方式。

其他资源