body 背景只显示一截是因默认 margin: 8px 且无显式高度；需重置 html、body 边距，确保 html 高度继承，body 设 min-height: 100vh，并用 background-size: cover + center center + no-repeat 避免变形裁切。
body 上直接设 background-image 为什么只显示一截
因为 body 默认有 margin: 8px，且没有显式高度——背景只渲染在内容区域，上下左右必然留白。浏览器不会自动把它撑到视口那么高。
必须同时处理三件事：
-
html, body { margin: 0; padding: 0; }—— 清掉默认边距 -
html { height: 100%; }或html { min-height: 100vh; }—— 补全高度继承链 -
body { min-height: 100vh; }—— 比height: 100vh更安全，内容超长时背景不被截断
background-size: cover 和 100% 100% 的实际差别
选错就等于没设：前者等比缩放+裁剪，后者强制拉伸+变形。广告图里有人脸、Logo 或文字，用 100% 100% 会导致脸变宽、字糊成条。
正确做法是：
- 用
background-size: cover→ 保证不糊、不歪，接受合理裁剪 - 配
background-position: center center→ 防止关键内容（比如人脸）被切掉 - 加
background-repeat: no-repeat→ 否则小图会平铺成马赛克
路径写错、图片不加载的典型表现
DevTools Network 面板看到 404，但页面“看起来像没生效”，其实是图根本没加载进来。
常见坑：
- CSS 文件在
/static/css/main.css，图在/static/images/bg.jpg，得写url("../images/bg.jpg")，不是相对 HTML 文件位置 - 用绝对路径必须以
/开头：url("/images/bg.jpg") - Linux 服务器区分大小写：
Ad.jpg≠ad.jpg - URL 含中文或空格？必须 URL 编码，或直接重命名为
ad-banner.jpg
移动端和视差滚动要特别小心
background-attachment: fixed 在 iOS Safari 上多数被禁用，部分机型会卡顿甚至触发白屏；小屏下 cover 容易把人脸裁掉，光靠 center 不够。
稳妥方案：
- 去掉
background-attachment: fixed，改用position: fixed+z-index: -1的div包裹img或video - 垂直锚点微调：
background-position: center 30%把焦点上移，避开底部裁切 - 广告图优先用横构图（16:9 或 21:9），避免竖图在桌面端大片留黑
真正卡住的从来不是代码怎么写，而是路径算错、高度没继承、缩放值乱选这三处。尤其广告上线前常被压缩图尺寸，320×240 的图配 cover 会放大模糊却不报错，得靠肉眼盯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
