CSS：背景过滤器的解决方法？

Question

backdrop-filter 是最近的 CSS 功能，在现代浏览器中尚不可用（至少截至 2016 年 7 月 1 日）。

• Chrome 51 通过 Experimental Web Platform 标志支持 backdrop-filter 。
• Safari 9.1 通过 -webkit- 前缀支持它
• Firefox 47 不支持

处于这种无法使用的状态，我想知道是否存在任何替代方法来带来相同的结果。

blur ， grayscale 的 JS 解决方法，…也欢迎

backdrop-filter 的发展可以通过 https://bugs.chromium.org/p/chromium/issues/detail?id=497522 追踪

原文由 ryanafrish7 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 Chrome M76 开始，background-filter 现在已发货，没有前缀，并且没有所需的标志。

https://web.dev/backdrop-filter/

注意：（由于 Mozilla 尚未发布此答案，因此该答案一直被否决）：此功能在 Safari、Chrome 和 Edge 中可用，但在 Firefox 中尚不可用。 Mozilla 计划 很快发布它，但还没有。因此，此答案不包含“解决方法”，而只是有关哪些浏览器 需要 解决方法的更多信息。这似乎仍然是有用的信息。

原文由 Mason Freed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

所有桌面浏览器现在似乎都支持下拉过滤器。但是，最新的 Firefox for android 仍然没有默认设置 ( https://caniuse.com/css-backdrop-filter )。我将此方法用于移动 Firefox 和旧版浏览器，在此示例中，我使用的是 Bootstrap 变量（ https://www.thiscodeworks.com/firefox-css-backdrop-filter-workaround-css/60facccc0c27230014227666 ）：

 /* Slightly transparent. Fallback to .9 (undefined --bs-bg-opacity) */
    .backdrop-blur {
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, .9));
    }

/* if backdrop support, very transparent and blurred. --bs-bg-opacity set to .5 */
    @supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
      .backdrop-blur {
       --bs-bg-opacity: .5;
       -webkit-backdrop-filter: blur(20px);
       backdrop-filter: blur(20px);
      }
    }

原文由 Sam Miller 发布，翻译遵循 CC BY-SA 4.0 许可协议