元素背后的模糊处理和色彩偏移。
半透明、模糊和其他效果是创造深度效果的实用方式,同时保留了背景内容的上下文。它们支持多种用例,例如磨砂玻璃、视频叠加层、半透明导航标头、不当图片屏蔽、图片加载等。您可能认识到两种常见的操作系统会造成上述影响:Windows 10 和 iOS。
过去,这些技术在网络上实施起来非常困难,因此需要的技巧或解决方法并不完美。近年来,Safari 和 Edge 都通过 background-filter
(或 -webkit-backdrop-filter
)属性提供了这些功能,该属性根据过滤条件函数动态混合前景色和背景色。从版本 76 开始,Chrome 现在支持 background-filter
。
浏览器支持
出于性能方面的原因,在 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);
}
多个过滤条件
有时,您需要使用多个滤镜才能达到所需的效果。为此,请提供用空格分隔的过滤条件列表。例如:
.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);
}
动态背景上的文字对比度
如前所述,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;
}
总结
在过去几年里,已有超过 560 名用户点赞了 Chromium 错误,这明确表明这是期待已久的 CSS 功能。Chrome 的 backdrop-filter
版本 76 让 Web 更接近真正像操作系统的界面呈现方式。