background-size: cover实现全屏背景需同时满足路径正确、html/body高度设为100%、清除margin，否则仅缩放图片却不撑满容器；cover等比缩放裁剪，100% 100%强制拉伸变形。
直接用 body 加 background-size: cover 就能实现可靠全屏背景，但 90% 的失败都卡在路径、高度、缩放三者没对齐——不是代码写错，而是默认行为没覆盖。
background-size: cover 和 100% 100% 到底差在哪
两者视觉效果可能相似，但行为逻辑完全不同：cover 等比缩放图片，确保容器被完全覆盖（可能裁剪边缘）；100% 100% 是强制拉伸，宽高各自填满，必然变形。
- 用
cover：适合摄影类、氛围感强的图，重点在“不糊、不歪”，接受合理裁剪 - 用
100% 100%：仅限纯色渐变、几何图案等无比例依赖的图，否则人物脸会变胖 - 移动端慎用
cover：小屏下关键内容（如人脸、Logo）容易被裁掉，建议配合background-position: center 30%微调垂直锚点
body 上设背景为什么经常只显示一截
因为 body 默认有 margin，且没显式高度——浏览器不会自动把它撑到视口那么高。
- 必须加
body { margin: 0; min-height: 100vh; }，min-height比height更安全，内容超长时背景不会被截断 -
html元素也建议设height: 100%，否则某些旧版 Safari 下100vh计算异常 - 如果用了 CSS 预处理器或框架（如 Tailwind），检查是否全局重置了
bodymargin，别被隐藏样式覆盖
background-image 路径 404 的真实原因
不是文件不存在，而是路径基准错了：浏览器解析 url() 时，永远以 CSS 文件所在目录为起点，不是 HTML 文件。
- CSS 在
/static/css/main.css，图在/static/images/bg.jpg→ 必须写url("../images/bg.jpg") - 用绝对路径更稳：
url("/images/bg.jpg")（从网站根目录起算） - Linux 服务器上大小写敏感，
bg.JPG≠bg.jpg，本地开发不报错≠上线能用 - DevTools 的 Network 面板里直接看请求 URL 和返回状态，别靠“页面没变”猜问题
fixed 背景在 iOS 上失效怎么办
background-attachment: fixed 在大部分 iOS 版本（尤其是 Safari）中被禁用，滚动时会退化成随动效果，这不是 bug，是系统级限制。
- 降级方案：改用
position: fixed的div+z-index: -1包裹img或video，它在 iOS 上仍可靠 - 若坚持用 background，去掉
fixed，改用background-attachment: scroll（默认值），再通过background-position: center center+cover保持观感稳定 - 注意：iOS 上
fixed背景还会触发渲染层合成开销，导致滚动卡顿，主动放弃反而是性能优化
真正难的不是写出那几行 CSS，而是判断什么时候该用 background-image，什么时候该用 img + object-fit，以及在用户看不到的地方（比如 Safari 的 fixed 限制、Linux 的大小写规则）提前埋好兼容性补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
