background-position用于定位背景图像，取值为center或50% 50%可实现背景图自身中心与容器中心对齐；它仅适用于background-image，不作用于可替换元素，且不受padding影响，必须配合background-image使用。
object-position 不能用于背景图片——它只作用于可替换元素（如 <img>、<video></video>），对 background-image 完全无效。
你要调背景图的“对齐中心”，该用的是 background-position，不是 object-position。
background-position 怎么让背景图视觉中心对齐容器中心？
background-position: center 就是默认行为，等价于 50% 50%，它把背景图自身的中心点对齐到容器的中心点。
但注意：这个“中心”是基于背景图原始尺寸计算的，不是容器尺寸。
比如一张 2000×1000 的图，在 400×300 的容器里平铺或 cover 时，background-position: center 仍以图本身宽高为基准找中点。
-
background-position: 75% 25%→ 图像横向 75% 处对齐容器左边缘，纵向 25% 处对齐容器上边缘 -
background-position: right bottom→ 图像右下角贴容器右下角 -
background-position: calc(50% - 100px) calc(50% - 50px)→ 手动微调偏移（适用于已知图尺寸）
常见错误：
- 把
object-position: center写在div上，期望控制背景图 → 无效，CSS 忽略且不报错 - 混用
background-size: cover和object-position→ 后者不起作用，纯浪费字节
真要用 object-position？那就别用背景图
换成真实 <img> 元素，配合 object-fit: cover：
- 容器必须有明确宽高（
width+height或aspect-ratio） -
<img>要设object-fit: cover（或contain） - 再加
object-position: center 30%控制裁剪后哪部分居中
例如人像想露脸：
<div style="width: 300px; height: 400px;"> @@##@@ </div>
为什么老有人搞混这两个属性？
因为语法一样（都支持 center top、20% 50%），但：
-
background-position移动的是图层，不改变语义、无alt、不可懒加载 -
object-position移动的是实际图像内容坐标，保留可访问性、响应式srcset、浏览器解码优化
如果设计稿要求“某张图的鼻子始终在容器正中”，且这张图要被屏幕阅读器读出、支持 loading="lazy"、未来可能加 hover 缩放——那必须用 <img src="face.jpg" style="max-width:90%"> + object-fit + object-position，而不是背景图。
兼容性上，object-fit / object-position 在 IE 中完全不支持，而 background-position 几乎所有浏览器都支持。但如果你不需要支持 IE，就别拿背景图凑数——该用语义化图像的时候，就用图像。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
