元素后的模糊和颜色偏移。
半透明、模糊和其他效果有助于营造深度,同时让背景内容与背景融为一体。它们支持各种用例,例如磨砂玻璃、视频叠加层、半透明的导航标题、不当的图片审查、图片加载等。这些特效可能会在 Windows 10 和 iOS 这两个常用的操作系统中辨别。
![磨砂玻璃效果示例。](https://web.developers.google.cn/static/articles/backdrop-filter/image/an-example-a-frosted-gla-e73a5c4ccf301.jpg?authuser=5&hl=sk)
过去,这些技术很难在网络上实施,所需的黑客手段或变通方案并不完美。近年来,Safari 和 Edge 都通过 background-filter
(或者 -webkit-backdrop-filter
)属性提供这些功能,该属性会根据过滤器函数动态混合前景色和背景色。现在,Chrome 支持 background-filter
(从版本 76 开始)。
backdrop-filter
的过滤器函数演示。请在 CodePen 上试用该示例。
浏览器支持
出于性能原因,如果 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
会对半透明或透明的元素应用一种或多种效果。要了解这一点,请参考以下图片。
![一个叠加在圆圈上的三角形。无法通过三角形看到圆圈。](https://web.developers.google.cn/static/articles/backdrop-filter/image/a-triangle-superimposed-a7408c12ecfc6.png?authuser=5&hl=sk)
.frosty-glass-pane { backdrop-filter: blur(2px); }
![一个叠加在圆圈上的三角形。三角形是半透明的,可让玩家透过它看到圆圈。](https://web.developers.google.cn/static/articles/backdrop-filter/image/a-triangle-superimposed-f08e7aa317fea.png?authuser=5&hl=sk)
.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);
}
<ph type="x-smartling-placeholder">多个过滤条件
有时,你需要使用多个滤镜才能达到想要的效果。为此,请提供以空格分隔的过滤条件列表。例如:
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
在以下示例中,四个窗格分别具有不同的背景幕滤镜组合,而同一组形状在它们后面呈现动画效果。
叠加层
此示例展示了如何对半透明背景进行模糊处理,让文字清晰易读,同时以风格方式与网页背景融为一体。
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
<ph type="x-smartling-placeholder">动态背景上的文字对比度
如前所述,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;
}
<ph type="x-smartling-placeholder">总结
在过去几年中,超过 560 家用户赞了 Chromium 错误,这明显是备受期待的 CSS 功能。Chrome 发布的 backdrop-filter
(版本 76)使网络更接近真正类似于操作系统的界面呈现方式。