background-size: cover未填满屏幕最常见原因是容器无高度，需重置margin/padding、设min-height:100vh、background-repeat:no-repeat；cover裁剪适配，contain等比留白；路径须相对css文件，移动端慎用fixed。
background-size: cover 为什么没填满屏幕
最常见的情况是容器本身没高度，background-size: cover 再大也画不出来。比如只给 body 或某个 div 设了背景图和 cover，但没清默认 margin、也没设 min-height，结果背景只出现在文字那一小块区域。
必须做三件事：
-
body { margin: 0; }或全局重置* { margin: 0; padding: 0; } -
html, body { min-height: 100vh; }（不是height: 100%，后者依赖父级高度） -
background-repeat: no-repeat—— 没加这句，小图会平铺，cover就失效了
cover 和 contain 到底该选哪个
cover 是等比缩放至短边刚好撑满容器，然后裁掉多余部分；contain 是等比缩放至长边刚好贴住容器边缘，四周可能留白。选错会导致关键内容被切掉或文字看不清。
适用场景：
- 全屏 banner、氛围图 → 用
background-size: cover+background-position: center center - Logo、图标、带文字的图 → 用
background-size: contain+background-position: center - 绝对不能用
100% 100%：强制拉伸必变形，人像/文字图一眼假
路径正确但图片还是不显示
浏览器报 404，90% 是路径相对于 CSS 文件算的，不是 HTML。比如 CSS 在 /static/css/main.css，图在 /static/images/bg.jpg，就得写 url("../images/bg.jpg")。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
其他高频坑：
- 本地双击打开 HTML（
file://协议）时，Chrome/Firefox 会拦截图片请求 → 改用python3 -m http.server启个本地服务 - Linux 服务器大小写敏感：
bg.JPG≠bg.jpg，开发时不报错 ≠ 上线能用 - 直接看 DevTools 的 Network 面板，找带 404 的图片请求，别靠“没看见”瞎猜
移动端 background-attachment: fixed 失效
iOS Safari 和多数安卓 WebView 对 background-attachment: fixed 支持极差，滚动时卡顿、闪烁甚至背景直接消失。这不是你代码的问题，是渲染引擎限制。
解决方案很直接：
- 移动端优先用默认值
scroll（即不写这一行） - 真要实现视差效果，改用 JS 控制
transform: translateY()或position: sticky模拟 - 别把
fixed和cover绑一起用，移动端基本等于放弃兼容性
实际缩放逻辑不取决于 HTML 结构，而取决于容器尺寸、background-size 取值、以及是否设置了可靠的 background-position —— 这三者没对齐，再调十次 width 和 height 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
