根本原因在于未理解background-size与background-position的组合逻辑及浏览器默认行为；cover有白边是因裁剪方向由position决定，默认居中导致比例不匹配时边缘被切，容器背景色露出。
图片铺不满全屏，或者拉伸变形、留白、居中不居中——根本不是“没写对代码”，而是没理解 background-size 和 background-position 的组合逻辑，以及浏览器默认行为怎么干扰你。
为什么 background-size: cover 有时还是有白边？
常见错觉：写了 cover 就万事大吉。实际它只保证“完整覆盖容器”，但裁剪方向由 background-position 决定，默认是 50% 50%（居中），如果图片宽高比和视口不一致，边缘必然被切掉——你看到的“白边”其实是容器背景色露出来了。
- 确保根元素没有默认 margin：
body { margin: 0; } - 让 body 占满视口：
html, body { height: 100%; } - 图片设为背景前，先确认它本身分辨率够高（至少 1920×1080），否则
cover会放大模糊 - 如果必须保留全部内容不裁剪，改用
background-size: contain，但会留空隙
background-size: 100vw 100vh 会拉伸变形吗？
会，而且非常容易踩坑。这个写法强制把图片拉到视口宽高，完全忽略原始比例。比如一张 4:3 的图，在 16:9 的屏幕上会被横向压扁或纵向拉长。
- 仅适用于你明确控制图片比例，且能接受失真的场景（如纯装饰性 banner）
- 比
cover更难响应式适配：手机竖屏时100vh可能超出可视区域，触发滚动条 - 替代方案：用
background-size: auto 100vh（等比缩放高度撑满，宽度自适应），再配合background-position: center
移动端 Safari 下背景图不显示或缩放异常
iOS Safari 对 background-attachment: fixed 和某些 background-size 组合有兼容问题，但更常见的是 viewport 设置缺失或图片路径错误。
立即学习“前端免费学习笔记（深入）”；
- 必须加 viewport meta：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免用相对路径加载背景图，优先用绝对路径或 base64（尤其小图）
- Safari 不支持
background-size: cover在body上生效（旧版本），稳妥做法是套一层<div id="bg">并设为position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 检查图片 MIME 类型是否正确（.webp 在部分旧 iOS 需 fallback 到 .jpg）
真正难的不是写哪一行 CSS，而是判断这张图到底该“裁剪保形”还是“缩放保全”，以及要不要为 iPhone X 以上机型预留安全区——这些没法靠一个属性解决，得看设计需求和用户设备分布。
