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

元素背后的模糊处理和色彩偏移。

Adam Argyle
Joe Medley
Joe Medley
GitHub
半透明、模糊和其他效果是创造深度效果的实用方式，同时保留了背景内容的上下文。它们支持多种用例，例如磨砂玻璃、视频叠加层、半透明导航标头、不当图片屏蔽、图片加载等。您可能认识到两种常见的操作系统会造成上述影响：Windows 10 和 iOS。

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

过去，这些技术在网络上实施起来非常困难，因此需要的技巧或解决方法并不完美。近年来，Safari 和 Edge 都通过 background-filter（或 -webkit-backdrop-filter）属性提供了这些功能，该属性根据过滤条件函数动态混合前景色和背景色。从版本 76 开始，Chrome 现在支持 background-filter。

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

浏览器支持

浏览器支持

  • 76
  • 17
  • 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() 等。如果您想使用外部图片以及关键字 none、inherit、initial 和 unset，它还支持 url() 函数。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 让 Web 更接近真正像操作系统的界面呈现方式。

其他资源