backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。
此属性是定义筛选器属性的筛选器效果模块级别1的扩展。它使用与filter属性相同的语法，但效果将应用于元素的背景。这种影响常见于运行ios7及以上版本的设备接口，以及os x yosemite及以上版本的设备接口。如果没有这个特性，这种效果只能通过编辑背景图像本身并应用剪裁和定位技术来实现。
若要使属性具有任何可见效果，需要从嵌套元素或绝对位置沿Z轴将两个元素堆叠在一起。另外，应用背景过滤器的元素的背景必须是半透明的。backdrop filter的工作原理是使浏览器引擎将目标锁定在样式元素后面的内容，而不是元素本身的背景。过滤效果随后应用于该内容，在最终呈现中，背景与页面上的其他元素合成。
对元素应用背景过滤器也会创建新的堆叠上下文，就像应用不透明度时一样。
请注意，使用此属性可能会对性能产生不利影响，特别是当应用于大量元素或页面的大区域时，因此应谨慎使用。
官方语法
- 语法：
backdrop-filter: none | <filter-function-list> - 首字母： 无
- 适用于： 所有元素。在svg中，它应用于没有<defs>元素和所有图形元素的容器元素
- 可设置动画: 是
<filter-function-list>
一个空间分隔的过滤函数列表，应用于它们被声明的顺序。下面是可用的筛选器函数列表，它们与筛选器属性的筛选器功能相同。
- blur()
- brightness()
- contrast()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
- drop-shadow()
- url()
1 /* 关键词值 */ 2 backdrop-filter: none; 3 4 /* SVG 过滤器 */ 5 backdrop-filter: url(commonfilters.svg#filter); 6 7 /* <filter-function> 过滤器函数 */ 8 backdrop-filter: blur(2px); 9 backdrop-filter: brightness(60%); 10 backdrop-filter: contrast(40%); 11 backdrop-filter: drop-shadow(4px 4px 10px blue); 12 backdrop-filter: grayscale(30%); 13 backdrop-filter: hue-rotate(120deg); 14 backdrop-filter: invert(70%); 15 backdrop-filter: opacity(20%); 16 backdrop-filter: sepia(90%); 17 backdrop-filter: saturate(80%); 18 19 /* 多重过滤器 */ 20 backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); 21 22 /* 全局值 */ 23 backdrop-filter: inherit; 24 backdrop-filter: initial; 25 backdrop-filter: unset;
示例
下面是使用“背景过滤器”属性创建磨砂玻璃效果的简单示例。标记是一个图像和一个包含字幕的文本的div。
<div class="container"> <img src="https://ichef.bbci.co.uk/images/ic/976x549_b/p0121stm.jpg"> <div class="caption"> <h3>Morgana</h3> <p>played by Katie McGrath</p> </div> </div>
标题绝对放置在图像的底部，背景滤光片应用于它。
.caption { padding: 0.5em 1em; position: absolute; left: 0; right: 0; bottom: 0; backdrop-filter: blur(4px); background-color: rgba(255, 255, 255, 0.5); }
最后的效果应该是这样的：
文章翻译自：https://tympanus.net/codrops/css_reference/backdrop-filter/