如何在HTML&CSS中实现backdrop-filter渐变模糊效果？

backdrop-filter 本身不支持直接设置渐变，但可以通过**伪元素 + 遮罩（mask）**的方式实现类似效果，适配你的现有代码：

修改后的 navbar.module.css 代码： #

.container {
    position: fixed;
    top: 0px;
    /* 保留你原有的其他布局属性，比如width、padding等 */
    position: relative; /* 新增，让伪元素相对于容器定位 */
    background: linear-gradient(rgba(37, 47, 81, 0.6), rgba(37, 47, 81, 0));
    /* 移除原来的backdrop-filter */
}

.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(3px); /* 把模糊效果放在伪元素上 */
    /* 用渐变遮罩控制模糊的显示范围，从顶部完全模糊到底部无模糊 */
    -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    mask: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
    z-index: -1; /* 把伪元素放在背景层，不影响导航栏内容 */
}

说明： #

• 伪元素::before会铺满整个导航栏容器，单独承担backdrop-filter的模糊效果
• 通过mask（兼容webkit前缀）的线性渐变，让模糊效果从顶部100%可见，逐渐过渡到底部完全透明，和你的背景渐变方向一致
• 现代浏览器已原生支持backdrop-filter，无需额外webkit前缀；若浏览器提示不支持，检查是否为浏览器版本过旧，或容器背后是否有可模糊的内容（backdrop-filter需要依赖容器后方的元素生效）

额外注意： #

如果导航栏内有可交互元素（比如列表项链接），伪元素的z-index: -1已确保它在内容下方，不会遮挡点击事件。

内容的提问来源于stack exchange，提问作者Adam Beloš