实现导航栏底部渐隐的模糊背景效果技术求助

你的问题出在-webkit-mask-image的渐变设置上——当前写法是在$height-header位置直接从黑色切换到透明，没有过渡区间，所以会出现明显的硬边界。可以通过以下调整实现平滑渐隐：

修改步骤： #

1. 给渐变添加过渡区间：把硬切换的渐变改成从黑色逐步过渡到透明，比如设置一个20px的过渡带（可按需调整）。
2. 扩展伪元素高度：让伪元素向下延伸过渡带的高度，确保渐变效果完整显示，不会被截断。

修改后的SCSS代码： #

$height-header: 60px; // 替换为你实际的导航栏高度
$fade-height: 20px; // 渐变过渡的高度，可自定义

.c-blur {
    &:before {
        content: "";
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        // 调整mask渐变，添加过渡区间
        -webkit-mask-image: linear-gradient(to bottom, black calc(#{$height-header} - #{$fade-height}), transparent #{$height-header});
        mask-image: linear-gradient(to bottom, black calc(#{$height-header} - #{$fade-height}), transparent #{$height-header});
        position: absolute;
        // 扩展伪元素底部，容纳过渡区域
        inset: -1px 0 -#{$fade-height};
        pointer-events: none;
        user-select: none;
        opacity: 0;
        
        .has-sticky-nav &,
        .has-sticky-nav-scrolled & {
            opacity: 1;
        }
    }
}

代码说明： #

• $fade-height：定义渐变过渡的高度，数值越大，过渡效果越平缓。
• calc(#{$height-header} - #{$fade-height})：从导航栏高度减去过渡高度的位置开始，黑色逐渐向透明过渡，到导航栏高度位置完全透明。
• inset: -1px 0 -#{$fade-height}：让伪元素向下延伸$fade-height的距离，确保渐变过渡带不会被容器截断，完整呈现平滑效果。

修改后，模糊栏底部会自然渐隐至透明，无论下方显示什么内容都能实现无缝过渡，不会再出现明显边界。

内容的提问来源于stack exchange，提问作者craigjoe