背景滤镜

CSS 中的 backdrop-filter 属性用于将 滤镜效果（grayscale、contrast、blur 等）应用于元素的背景/幕布。backdrop-filter 与 filter 属性的效果相同，只是滤镜效果仅应用于背景，而不是应用于元素的内容。

经典示例

在没有 backdrop-filter 的情况下对背景进行滤镜处理

在 backdrop-filter 出现之前，添加滤镜背景的唯一方法是添加一个单独的“背景”元素，将其放置在前台元素的后面并对其进行滤镜处理，如下所示

<div class="wrapper">
  <div class="background"></div>
  <div class="foreground"></div>
</div>

.background {
  filter: blur(4px);
  position: absolute;
  width: 100%;
  height: 100%;
}

backdrop-filter 属性允许您消除这个额外的“背景”元素，并直接将滤镜应用于幕布

.foreground {
  backdrop-filter: blur(10px);
} /* No .wrapper needed! */

在撰写本文时，backdrop-filter 是 Filter Effects Module 2 Editor’s Draft 的一部分，尚未正式成为任何规范的一部分。浏览器支持目前有限（见下文）。

语法

.element {
  backdrop-filter: <filter-function> [<filter-function>]* | none
}

可以是以下任何一个

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() –（用于应用 SVG 滤镜）

您可以将多个 <filter-function> 应用于幕布，如下所示

.element {
  backdrop-filter: grayscale(0.5) opacity(0.8) /* ...and on and on... */;
}

有关每个滤镜函数的有效值的更多信息，请参阅 W3C Filter Effects Module Working Draft。

示例

有关滤镜函数和巧妙的组合使用方法的综合了解，请参阅 CSS-Tricks 上的 filter 年鉴条目。

以下示例来自 Robin Rendle 的 探索 backdrop-filter 的文章。

浏览器支持

资源

• Robin Rendle 编写的背景滤镜属性
• MDN 上的背景滤镜条目

相关