背景图被导航栏遮挡主因是z-index与定位层级混乱，需用独立fixed容器设z-index:-1承载背景，导航栏加背景色或backdrop-filter，并为主内容区预留padding-top。
背景图片被导航栏遮挡怎么办
直接原因是
层级没设对，或者导航栏用了
但没配
或
，导致背景图从导航栏下方“透”出来，看起来像被盖住。本质不是“冲突”，而是层叠上下文没理清。
检查导航栏是否设置了
或
—— 这会让它脱离文档流，默认渲染在背景图上方
确认背景图是设在
还是
上：设在
时，若
没设
，滚动时可能只显示一屏，误以为“不见了”
给导航栏加
（哪怕半透明）才能真正“挡住”背景，否则视觉上就是“和背景混在一起”，不是遮挡，是融合
让背景图始终铺满且不被导航压变形
常见错误是把
直接写在
，又给导航栏设了
+
，结果页面内容上移、背景图被“切掉顶部”。关键在容器划分和尺寸控制。
用独立容器承载背景图，比如
，设为
内部用
+
实现视差感（注意：iOS Safari 对
支持差，慎用）
主内容区（
或
）加
等于导航栏高度，避免文字顶到导航栏底下
兼容 iOS 和旧版 Android 的背景图方案
在 iOS Safari 和部分 Android WebView 中会失效或卡顿，表现为滚动时背景图“跳动”或“跟着滚”。必须降级处理。
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
放弃
，改用
，靠
+
保观感
对 iOS 加 hack：
若必须视差效果，用 JS 监听
动态改
，但注意性能：加
，节流用
导航栏透明但要清晰可读的实操要点
纯透明导航栏（
）在背景图明暗交界处文字会看不清。不能只靠加阴影，得结合对比度控制。
立即学习
“
前端免费学习笔记（深入）
”；
用
做毛玻璃效果——但注意：Android 旧版、IE 全系不支持，需加
判断
文字颜色别用死黑/死白，改用
或
，方便后期用 JS 根据背景亮度动态切换
加一层半透黑遮罩在背景图上：
这比调导航栏 opacity 更可控
实际最易忽略的是：没有检查
和
的
、
是否为 0，以及
是否漏写——这些都会导致背景图高度计算错误，在小屏或缩放时突然“断层”。
z-indexposition: fixedbackground-colorbackdrop-filterposition: fixedabsolutebodyhtmlbodyhtmlheight: 100%background-colorbackground-imagebodyheight: 60pxposition: fixedposition: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;#bg-containerbackground-size: coverbackground-attachment: fixedfixedmain.contentpadding-topbackground-attachment: fixedfixedbackground-attachment: scrollbackground-size: coverbackground-position: center@supports (-webkit-touch-callout: none) {
#bg-container {
background-attachment: scroll;
}
}scrolltransform: translateY()passive: truerequestAnimationFramebackground: transparentbackdrop-filter: blur(10px)@supportshsl(0, 0%, 90%)hsl(0, 0%, 10%)#bg-container::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
}htmlbodymarginpaddingmin-height: 100vh