CSS 滤镜 : backdrop-filter

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()

/* 关键词值 */
backdrop-filter: none;

/* SVG 过滤器 */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 过滤器函数 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重过滤器 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
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/