移动端侧滑导航点击汉堡菜单后背景透明，Filter:blur问题排查

我在开发移动端侧滑导航（off-canvas nav）时遇到了问题：点击汉堡菜单后，导航能正常从侧边滑入，但预期的背景模糊效果没实现，反而背景呈透明状态。我的预期效果是：

• 侧滑导航从侧边滑入（translateX(100vw) -> 0vw）
• 除导航和头部Logo外的所有内容添加模糊效果
• 汉堡菜单切换为叉号样式

相关CSS代码片段如下：

body.blur main > * {
filter: blur(5px) brightness(0.7);
pointer-events: none;
user-select: none;
z-index: -1;
}

问题成因 #

问题出在z-index: -1这个属性上。当给main下的所有子元素设置z-index: -1时，这些元素会被放置到body背景层的下方，导致原本的内容被隐藏，露出body的默认背景（若未设置body背景色则呈现透明），看起来就像是背景变透明了。

解决方法 #

1. 移除z-index: -1：不需要通过降低层级来隔离交互，pointer-events: none已经能阻止这些内容响应点击，filter也能实现模糊效果，保留这两个属性即可。
2. 确保导航层级更高：给侧滑导航容器设置更高的z-index值（比如100），保证导航显示在模糊内容的上方，避免被遮挡。

调整后的CSS示例：

body.blur main > * {
filter: blur(5px) brightness(0.7);
pointer-events: none;
user-select: none;
}

.off-canvas-nav {
z-index: 100;
/* 其他导航相关样式 */
}

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