CSS 模糊效果和背景颜色答案

【问题标题】：CSS Blur Effect and Background ColorCSS 模糊效果和背景颜色
【发布时间】：2020-03-05 01:11:15
【问题描述】：

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

  .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

这可能吗？

【问题讨论】：

使用@supports 规则根据浏览器支持有选择地设置样式。
完美。有效！。如果您可以在回复中发布，我可以标记为已回答。
很高兴为您提供帮助！也作为答案发布。 ;)

标签： css drop-down-menu background blur

【解决方案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);
        }
    }

【讨论】：