background-position以背景图片左上角为锚点，相对于容器内容区左上角定位；px值表示图片左上角的偏移量，百分比值按“图片对应比例位置对齐容器对应比例位置”计算，顺序必须水平在前垂直在后。
background-position 的坐标系到底是怎么算的
它不是以元素左上角为原点的绝对像素坐标，而是以「背景图片自身左上角」为锚点，对齐到「容器内容区左上角」后，再按指定偏移量移动。也就是说，background-position: 20px 10px 表示：把图片左上角从容器左上角往右移 20px、往下移 10px。
- 百分比值（如
50% 50%）是相对计算：图片的 50% 位置对齐容器的 50% 位置，所以居中 - 关键字（
top/center/bottom/left/right）本质是简写，top left≡0% 0%，center center≡50% 50% - 混合写法合法：
left 20px表示水平靠左，垂直下移 20px；但20px top会报错——顺序必须是「水平 垂直」，不能颠倒
用 px 定位时图片被裁剪？先检查 background-size
固定像素偏移配合默认的 background-size: auto 极易导致图片溢出或留白。比如一张 200×200px 的图，在 100×100px 容器里设 background-position: -30px -30px，结果只显示右下部分。
- 常见误操作：只调
background-position，忽略background-size对实际渲染区域的影响 - 若需完整显示图片并精准定位，优先考虑
background-size: contain或cover，再配百分比定位 - 若坚持用 px 偏移，务必确认容器尺寸 ≥ 图片尺寸 + 偏移量绝对值，否则必然裁剪
响应式场景下 background-position 失效的根源
媒体查询里改 background-position 没反应？大概率是被更高优先级的内联样式或更具体的 CSS 规则覆盖了。
- 浏览器开发者工具里看 computed 样式，确认生效的是哪条规则；注意
!important会破坏媒体查询的层叠逻辑 - 百分比值在响应式中更可靠：
background-position: 100% 0总是贴右上角，而right 10px在容器变窄时可能把图片推出可视区 - 避免在多个选择器里重复定义
background-position，CSS 层叠顺序容易误判
Sprite 图定位为什么总差几个像素
切图时导出的 PNG 带半透明边缘、Photoshop 默认开启“对齐到像素网格”、CSS 渲染时 subpixel rendering 等因素，都会让 background-position 的整数像素值看起来“不准”。
立即学习“前端免费学习笔记（深入）”；
- 用
background-position: -123.5px -45.5px可能比整数更准——别怕小数，现代浏览器支持 subpixel 定位 - 确保 sprite 图所有图标尺寸严格一致，且导出时不带抗锯齿毛边（可尝试“导出为 WebP/PNG-24 + 关闭平滑”）
- 调试时临时加
background-color: #ff0查看容器边界，排除 padding/margin 干扰
