背景图被页脚遮挡主因是页脚脱离文档流且内容区域高度不足，而非背景图下移；应优先采用Flex布局使页脚沉底并保持文档流，或合理设置padding-bottom、position上下文及background-attachment值。
背景图片被页脚遮挡的常见原因
多数情况不是背景图“跑下来”了，而是页脚没撑开、内容区域高度不足，导致 background-image 在视口内持续平铺或固定定位时，自然延伸到页脚所在位置——视觉上就成了“重叠”。关键不在背景图本身，而在文档流中页脚的定位方式和容器高度控制逻辑。
footer 使用 position: fixed 或 absolute 时的典型冲突
一旦页脚脱离文档流，它就不再参与高度计算，上面的内容区域（比如 main）若没有足够高度，背景图就会直接透出到页脚下方区域，形成视觉重叠。
- 避免对
footer单独设position: fixed后不预留底部边距——必须给body或main加padding-bottom，值 ≥ 页脚高度 - 若用
position: absolute，父容器（如body或div#wrapper）必须设position: relative且有明确高度（如min-height: 100vh） - 背景图若设了
background-attachment: fixed，滚动时页脚会“浮”在图上，此时重叠感更强；改用scroll（默认值）可缓解
用 Flex 布局强制页脚沉底且不遮背景
这是目前最稳定、语义清晰的解法：让页面整体成为 flex 容器，main 占满剩余空间，页脚自动压到底部，同时保持文档流内位置，背景图自然只渲染在对应区域。
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
}
footer {
/* 不加 position，不设高度，靠 flex 自动布局 */
}注意：main 的背景图会随内容高度变化而拉伸/裁剪；如果希望背景图始终覆盖整个视口（含页脚），那就该把 background-image 放在 body 上，而不是 main。
立即学习“前端免费学习笔记（深入）”；
背景图在 body 上但页脚仍盖住部分内容？
这通常是因为页脚设置了 z-index 且父容器没设 position，导致层叠上下文异常；或者页脚用了半透明背景，把底层背景图“透”出来造成混淆。
- 检查页脚是否有
background-color: rgba(255,255,255,0.9)这类半透设置——它会让背景图从页脚内部“透出”，看起来像重叠，实际是叠加显示 - 移除页脚的
z-index，除非你明确需要它浮在其他元素之上 - 若必须保留页脚遮罩效果，改用
backdrop-filter或单独加一层伪元素遮罩，而非依赖半透背景
真正难调的从来不是“怎么让页脚不盖图”，而是“要不要让页脚参与背景渲染”。搞清这个意图，再选容器和定位方式，基本就稳了。
