根本原因是html和body默认有margin且height不足，必须设height:100%和margin:0，并确保viewport正确设置，否则background-size:cover无法实现全屏铺满。
background-size: cover 为什么图片没铺满整个屏幕
根本原因不是属性写错了，而是 html 和 body 默认有 margin 和 height 不足。浏览器里 body 默认只包裹内容高度，哪怕设了 background-size: cover，父容器没撑开，图片照样缩在一小块里。
- 必须给
html和body都设height: 100%，否则cover没参照的“全屏”高度 - 清除
body默认 margin：margin: 0，不然顶部/左右会露白边 - 背景图要设在
html或body上，设在某个 div 里就只是铺满那个 div，不是“全屏”
cover 和 contain 的实际区别在哪
cover 是等比缩放后“覆盖”整个容器，可能裁剪；contain 是等比缩放后“完整显示”，可能留空。选哪个不看喜好，看设计需求。
- 用
cover：Banner 图、视觉主导的首屏，允许上下或左右被切掉一部分 - 用
contain：Logo 背景、图标示意、需要看清全部内容的场景 - 注意：两者都依赖容器尺寸。如果容器宽高比和图片不一致，差异立刻显现
移动端上 background-size: cover 失效的常见原因
不是 CSS 不支持，是 viewport 设置或设备缩放干扰了“视口尺寸”的计算逻辑。
- 漏写 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 尤其敏感 - 页面有横向滚动（比如子元素溢出），会导致
body宽度变大，cover按这个错误宽度缩放 - 某些安卓 WebView 对
100vh解析不准（地址栏收起/弹出会变），建议优先用100%而非100vh
如何让背景图真正“响应式”且不模糊
单纯 cover 不解决分辨率适配问题。小图拉伸到大屏会糊，大图在小屏加载又浪费带宽。
立即学习“前端免费学习笔记（深入）”；
- 用
background-image配合image-set()（Chrome/Firefox 支持）或媒体查询切换不同分辨率图 - 更稳妥的做法：用
<picture></picture>+<img alt="CSS如何实现背景图片全屏平铺_使用background-size cover属性" >替代背景图，再用 object-fit: cover + position: fixed 模拟，可控性更强 - 避免把文字直接叠在背景图上——高对比度区域可能让文字难读，加一层半透明遮罩更可靠
html 和 body 的基础样式约束，以及移动端 viewport 的联动影响。这两个点没调对，后面所有优化都是徒劳。 
