CSS 模糊效果和背景颜色

Question

我有一个具有模糊效果的下拉菜单。到目前为止我有这个：

  .transparent-header {
        background-color: rgba(0,0,0,0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }

问题

到目前为止，在 WebKit 上，由于 0.8 alpha，模糊太暗了。 如果我改变它，当模糊过滤器由于旧浏览器、Firefox 等不可用时，菜单会太透明。

需要什么

• 当模糊可用时：模糊 + 背景 alpha 0.5
• 当模糊不可用时：背景 alpha 0.9

这可能吗？

Answer 1

您可以使用 @supports 根据浏览器支持有选择地应用您的样式：

    .transparent-header {
        background-color: rgba(0,0,0,0.9);
    }

    @supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
        .transparent-header {
            background-color: rgba(0,0,0,0.5);
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
        }
    }