CSS：为不可用的背景过滤器提供替代方案

CSS 中的背景过滤器功能在大多数现代浏览器中仍然无法访问。虽然我们预计其未来的支持，但发现替代解决方案势在必行。

实现类似效果的一种方法是采用具有微妙透明度的背景。下面的 CSS 代码演示了这种方法：

/* Slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* Blurred effect with backdrop support */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

当不支持背景过滤器时，稍微透明的背景将作为后备。支持背景过滤器的浏览器将显示模糊效果。

下面提供了说明不支持和支持背景过滤器的效果的示例：

[透明后备图像]
[模糊图像]

通过采用此策略，即使在缺乏本机背景过滤器功能的浏览器中，您也可以在元素上合并视觉上吸引人的过滤器。