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);
        }
    }