background-position 的本质是“对齐”而非“位移”，即指定背景图某点与容器某点对齐；50px 100px 表示图左上角右下偏移，若图大或平铺则看似不动，需配合 background-repeat: no-repeat 才可见效果。
background-position 值写成 50px 100px 为什么图片没动？
因为 background-position 的偏移起点不是左上角，而是「背景图左上角对齐容器左上角」时的初始位置。你写的 50px 100px 是让背景图的左上角往右移 50px、往下移 100px —— 如果图本身比容器大，这看起来像“没动”；如果图小，可能直接移出视野。
常见错误现象：background-position: 20px 30px 设了却看不见变化，其实是图太小或容器没设 background-repeat: no-repeat，导致平铺掩盖了偏移效果。
- 务必搭配
background-repeat: no-repeat才能看清偏移效果 - 数值单位支持
px、%、em，但%的计算逻辑特殊（见下一条） - 若用
background-size: cover或contain，background-position仍生效，但作用对象是缩放后的图，不是原图
用 % 写 background-position 怎么算实际像素？
background-position: 50% 50% 不等于「把图中心移到容器中心」—— 它的意思是：让背景图的水平 50% 位置对齐容器的水平 50% 位置。这个细节决定你调图时会不会反复试错。
举个例子：一张 200×200px 的图放在 100×100px 容器里，background-position: 50% 50% 的结果是图的 (100,100) 点（即中心）对齐容器的 (50,50) 点（即中心），所以图只显示左上四分之一。想居中显示整张图，得用 background-position: center center 或 50% 50% 配合 background-size: contain。
-
0% 0%= 图左上角贴容器左上角 -
100% 100%= 图右下角贴容器右下角 - 百分比值本质是「图内坐标比例 → 容器内坐标比例」的对齐关系，不是位移量
想固定背景图某一点始终对准容器某个区域，比如 logo 角标
这时候别硬凑 px 或 %，直接用关键字组合更稳：background-position: right 10px bottom 20px —— 表示图的右侧边缘对齐容器右侧后，再往左偏 10px；图的底边对齐容器底边后，再往上偏 20px。
这种「方向 + 偏移」写法在响应式布局里特别有用，比如右上角用户头像浮层、左下角版权标识。它不依赖图尺寸，也不受缩放干扰。
- 支持的方向关键词：
left、center、right、top、bottom - 每个方向后可跟一个长度值（
px、em等），表示从该方向基准线出发的偏移 - 注意顺序：
left 20px top 10px和top 10px left 20px效果一样，但不能写成left top 10px（语法错误）
background-position 在 Retina 屏或 zoom 缩放时表现异常？
不是 bug，是像素对齐问题。当你用 px 值定位，而设备像素比（dpr）>1 或页面被缩放时，1px 可能对应多个物理像素，导致背景图边缘模糊或轻微抖动。
解决方案不是换单位，而是绕开像素级依赖：background-position: center 或 right bottom 这类纯关键字值完全不受缩放影响；如果必须精确定位，优先用 rem 或视口单位（如 vw），它们随缩放等比变化。
- 避免在高 DIP 场景下用
1px、2px这类整数偏移做关键对齐 -
background-position: 50.5px 50.5px在缩放后更容易出现半像素渲染，不如用50%或center - 调试时可用浏览器开发者工具的「Computed」面板确认最终解析值，别只信 CSS 源码
background-position 是“把图挪多少”，其实它是“让图上哪一点对齐容器上哪一点”。理解这一点，80% 的偏移失效问题就解了一半。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
