汉堡菜单中Header按钮显示异常，保留backdrop-filter的修复方案

问题原因 #

backdrop-filter 属性会创建新的层叠上下文，当按钮处于汉堡菜单的 overlay 容器内时，按钮的模糊效果会与容器的半透明背景、菜单内容的模糊效果产生渲染冲突，导致显示异常。

具体修复方案 #

方案1：用伪元素实现按钮的模糊效果

将 backdrop-filter 转移到按钮的伪元素上，避免与父容器的样式冲突：

.button {
    width: 148px !important;
    min-height: 40px !important;
    font-family: 'Teko', sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    background: transparent !important;
    margin-bottom: 60px !important;
    position: relative; /* 为伪元素提供定位基准 */
    z-index: 1; /* 确保按钮内容在模糊层上方 */
}

.button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(12px);
    z-index: -1; /* 将模糊层置于按钮内容下方 */
}

方案2：调整层叠顺序与添加基础背景

给按钮添加半透明背景色，并明确层叠顺序，为 backdrop-filter 提供稳定的渲染环境：

.button {
    width: 148px !important;
    min-height: 40px !important;
    font-family: 'Teko', sans-serif !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    background: rgba(255, 255, 255, 0.05) !important; /* 新增半透明背景 */
    margin-bottom: 60px !important;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 2; /* 确保按钮在菜单内容上方 */
}

方案3：为按钮容器创建独立层叠上下文

如果按钮嵌套在 overlay 内，给按钮的直接父容器添加以下样式，隔离渲染上下文：

.button-container {
    position: relative;
    z-index: 1;
    transform: translateZ(0); /* 创建独立层叠上下文，避免与菜单模糊效果冲突 */
}

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