图片未铺满全屏的主因是容器高度未设为100vh，且需配合background-attachment等属性；cover会裁剪、contain会留白；设备宽高比差异需媒体查询换图；性能关键在图片格式与尺寸而非cover属性本身。
background-size: cover 为什么图片还是没铺满全屏
常见错误是只写了 background-size: cover，但忘了设 background-attachment 和容器高度。浏览器默认 body 高度不撑满视口，cover 再强也无处可盖。
- 必须给根容器（比如
html或body）设height: 100vh，或确保父级有明确高度 - 若背景图随滚动“粘在视口”，加
background-attachment: fixed；否则滚动时可能露出空白 - 移动端 Safari 对
vh支持有坑（地址栏收放影响实际高度），稳妥做法是用min-height: 100vh+background-repeat: no-repeat
cover 和 contain 的实际区别在哪
cover 强制填满容器，可能裁剪边缘；contain 保证完整显示，但会留白。选哪个不看“好不好看”，而看内容是否允许被切——比如人物特写图用 cover 很危险，logo 图标用 contain 更安全。
-
cover：适合氛围图、大图海报，优先保证无空隙 -
contain：适合图标、徽标、需要完整识别的图形 - 两者都不缩放原图像素，只是调整渲染比例；真实文件体积和加载时间完全不变
全屏背景图在不同设备上错位或拉伸
根本原因是图片宽高比和屏幕宽高比不一致，而 cover 只能按比例缩放+居中裁剪。iPhone 竖屏（9:16）和桌面（16:9）差距太大，单张图很难兼顾。
- 用媒体查询换图：
@media (max-width: 768px)下换一张竖构图的background-image - 避免用
background-position: top这类固定值，改用center或50% 30%微调焦点区域 - 慎用
background-origin: content-box——它会让 padding 区域不显示背景，造成“伪留白”
性能与兼容性要注意什么
background-size: cover 本身无性能问题，但背后图片过大或格式不当才是瓶颈。IE9+ 支持该属性，但 IE 不支持 WebP，Safari 旧版不支持 AVIF。
- 图片尺寸建议不超过 1920×1080（桌面）或 1242×2688（iPhone），再大浏览器也不会渲染更多细节
- 优先用
.webp格式，配合<picture></picture>回退到.jpg，但 CSS 背景图不支持响应式源切换，只能靠 JS 或服务端判断 - 如果页面首屏就用全屏背景，记得加
loading="eager"（对 inline style 无效，所以推荐用<img>+object-fit: cover替代部分场景）
最常被忽略的是图片的「视觉重心」——cover 一定会裁剪，但裁哪、留哪，全靠 background-position 控制。不试真机、只看设计稿，大概率上线后发现人脸被切掉一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
