body 上直接用 background-image 行不通，因其高度由内容撑开且默认只渲染在内容区，需配合 min-height: 100vh、background-attachment: fixed、background-size: cover 才能铺满视口且不随滚动位移；更推荐设在 html 上以避免 margin 缺口，并注意路径、响应式及 iOS 兼容性。
body 标签上直接用 background-image 行不通？
多数人第一反应是给 加 background-image，但实际会发现图片不铺满、被内容遮挡、或滚动时背景跟着动——这不是 bug，是 CSS 默认行为。关键在：body 不是视口容器，它的高度由内容撑开，而背景默认只渲染在 body 的“内容区域”内。
- 必须同时设置
min-height: 100vh，确保 body 至少占满整个视口高度 - 加
background-attachment: fixed才能让背景不随滚动位移（否则滚动时背景会“上滑消失”） - 用
background-size: cover而非100% 100%，避免拉伸变形或留白
为什么推荐用 :root 或 html 而不是 body？
更稳妥的做法是把背景设在 标签上，因为 html 元素天然匹配视口尺寸，且不受 margin/padding 影响。body 上的 margin 默认为 8px，会意外露出背景色缺口。
-
上设置background-image+background-size: cover+background-position: center是最简解 - 如果要用 CSS 变量统一管理（比如换肤），定义在
:root里，再用background-image: var(--bg-img) - 注意：
background-repeat: no-repeat必须显式写，否则默认平铺
图片路径错误导致背景不显示的常见表现
控制台没报错，但页面纯白——大概率是路径问题。相对路径以 HTML 文件所在目录为基准，不是 CSS 文件位置。
- 用绝对路径最稳：
url('/assets/bg.jpg')（从域名根目录开始） - 检查浏览器开发者工具 Network 面板，看图片请求是否返回 404 或 403
- 如果图片在子目录（如
css/style.css），而 HTML 在根目录，那么url('../images/bg.jpg')才对，不是url('images/bg.jpg')
移动端适配和性能要注意什么？
大图在手机上加载慢、内存高，还可能触发 Safari 的背景缩放 bug（iOS 15+ 尤其明显）。
立即学习“前端免费学习笔记（深入）”；
- 提供响应式图片源：
background-image: url('bg-small.jpg'); background-image: image-set(url('bg-small.jpg') 1x, url('bg-large.jpg') 2x); - 加
background-color: #f0f0f0作为降级底色，避免图片加载中白屏 - 慎用
background-attachment: fixed在 iOS Safari 上，它会导致滚动卡顿，可改用scroll+background-size: cover
