background-position看似不生效，实因background-size缩放改变了坐标系；需统一单位、显式声明各层size并检查computed值。
background-position 值没生效？先确认 background-size 是否覆盖了定位逻辑
很多情况下 background-position 看似“不生效”，其实是被 background-size 的缩放行为干扰了。比如设了 background-size: contain 或 cover，背景图会被等比缩放并居中裁剪，此时你写的 background-position: 20px 30px 实际作用对象是缩放后的图，而不是原始图尺寸——坐标系已变。
-
background-size: auto（默认）：定位基于原始图尺寸，background-position像素值可直接对应图像左上角偏移 -
background-size: 100% 100%：图像被拉伸填满容器，定位坐标系变成容器尺寸，50% 50%就是容器中心 -
background-size: contain或cover：图像缩放后居中对齐，background-position仍按容器坐标系计算，但图像内容实际可见区域已变
想精确定位某张图的某个像素点？用像素值 + auto 组合
当需要把背景图中某个固定像素位置（比如图标左上角）对准容器内某点时，不能只靠 background-position 单独设置。必须配合 background-size 显式控制缩放比例，否则浏览器无法确定“1px”到底对应图上哪一像素。
- 若图宽高已知（如
200px × 100px），要让图中(40px, 20px)的点对准容器左上角，可写：background-size: 200px 100px;
background-position: -40px -20px; - 若图需等比缩放至宽度为容器 80%，则先算出缩放比：
background-size: 80% auto;，再按同比例换算偏移：background-position: calc(-40px * 0.8) calc(-20px * 0.8); - 避免混用百分比和像素值做定位，比如
background-position: 20% 10px—— 百分比按容器算，像素按图像原始尺寸算，两者坐标系不一致，结果难预测
多背景图下 position 和 size 必须一一对应
CSS 多背景语法中，background-image、background-position、background-size 等属性值是用逗号分隔的列表，**顺序严格对应**。错位一个，整组定位就全乱。
- 正确写法：
background-image: url(a.png), url(b.png);
background-position: top left, center;
background-size: 50px 50px, cover; - 错误写法：
background-position: top left, center;但background-size: cover;只写了一个值 → 第二张图用默认auto，第一张图反而没 size 控制，定位失效 - 建议始终显式写出全部层级的
background-size，哪怕某层是auto，也写成auto, auto，避免隐式继承导致错位
调试时别只看 computed 样式里的 position 值
浏览器开发者工具里看到的 background-position 计算值（比如 20px 30px）是最终结果，但它不反映你写的原始表达式是否被重写或降级。真正的问题常藏在 background-size 的实际生效值里。
立即学习“前端免费学习笔记（深入）”；
- 检查
background-size在 computed 面板中是否真的是你期望的值（例如写了contain，但父容器overflow: hidden导致渲染异常，实际缩放可能被截断） - 临时把
background-size改成auto，看background-position是否立刻响应——如果响应了，说明原问题就是 size 缩放干扰了定位坐标系 - 用
background-origin和background-clip检查定位参考点：默认background-origin: padding-box，如果你设了大 padding，0 0是从 padding 区左上角开始算，不是 content 区
定位不准的本质，往往是 background-size 改变了背景图的“有效画布”大小，而 background-position 仍在按旧坐标系理解位置。最稳妥的做法：要么统一用百分比（容器坐标系），要么统一用像素（图像原始坐标系），中间不混用；多图时务必核对每一项属性的逗号数量是否匹配。
