如何通过设备更改背景颜色使 -webkit-backdrop-filter 可用？

Question

我非常喜欢 Webkit 背景滤镜的外观，我是 CSS 和 HTML 的新手，但我知道背景滤镜只能在 Safari 上使用，而 Safari 并不多见浏览器人口。我想知道如何使不支持背景过滤器的设备默认为不透明背景。这是一个示例，如果我希望使用支持背景滤镜的设备的用户看到

.background{background:rgba(255,255,255,0);-webkit-backdrop-filter: blur(10px);}

以下是我希望没有支持背景滤镜的设备的用户看到的内容：

.background{background:rgb(255,255,255);}

我将使用什么编码来实现此目的？

Answer 1

只需使用 supports-Media Query 来检查浏览器是否支持该技术。

在你的情况下，它看起来是这样的：

.background {
    background: rgba(255, 255, 255);
}

@supports ((backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px)) {
    .background {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

如何通过设备更改背景颜色使 -webkit-backdrop-filter 可用？

How do I make -webkit-backdrop-filter availability by device change background-color?

css

safari

mobile-safari

background-color

ios