图片未居中是因为background-size: cover仅控制缩放，不控制定位，默认定位在左上角；需显式设置background-position: center或复合属性中正确书写顺序。
background-size: cover 为什么图片还是没居中？
因为只设 cover 不够，它只控制缩放，不控制定位。默认定位是 0% 0%（左上角），图片再大也从左上开始铺。必须显式加 background-position: center center 或简写为 center。
常见错误写法：background: url(img.jpg) no-repeat cover; —— 这里 cover 被当成 background-attachment 解析，实际等价于 background-size: auto，根本没生效。
- 正确顺序：先
url()，再no-repeat，再center（定位），最后/ cover（尺寸，用斜杠分隔） - 推荐写法：用
background复合属性一次性写全，避免顺序错乱 - 如果用
background-image单独设，那background-size和background-position必须额外声明
body 上设背景图总有一圈白边？
这是默认 margin 和 padding 搞的鬼。浏览器给 <body> 默认加了外边距（通常是 8px），导致背景图无法真正“撑满视口”。
解决方法很简单，但容易漏掉：
立即学习“前端免费学习笔记（深入）”；
- 重置
body和html的margin与padding：都设为0 - 加
height: 100vh到body，确保它至少占满一屏（vh比%更可靠，不受父容器高度影响） - 如果内容超长，还要加
min-height: 100vh，否则滚动时底部可能露白
用 background-image 还是 object-fit？
background-image 是最直接方案，适合纯装饰性全屏图；但如果你需要让图片成为 DOM 元素（比如要加 hover 动画、响应点击、SEO 可读），就得用 <img> + object-fit: cover。
关键区别：
-
background-image无法被屏幕阅读器识别，也不参与文档流 -
<img src="..." style="width:100vw; height:100vh; object-fit:cover;">需要父容器overflow: hidden防止溢出，且100vh在 iOS Safari 中可能有地址栏高度抖动问题 - 性能上两者差异不大，但
background-image更轻量，无额外 DOM 节点
移动端 Safari 拉伸或错位怎么办？
iOS Safari 对 100vh 的处理很特别：地址栏收起/展开时会动态改变视口高度，导致背景图跳变。用 100vh 做高度基准在 Safari 上基本不可靠。
稳妥做法是放弃 vh，改用 JS 动态计算并设内联样式：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);然后 CSS 里用：height: calc(var(--vh, 1vh) * 100);。但更简单的是——干脆不用高度控制，只依赖 background-size: cover + background-attachment: fixed（慎用，部分安卓机有渲染 bug）。
真正容易被忽略的一点：background-attachment: fixed 在移动端多数浏览器中会被忽略或强制转为 scroll，别指望它能稳定工作。
