切图时设计师给了一张拼满小图标的雪碧图，用的时候只想要其中一个，就得靠 background-position 把图挪到恰当位置。这个属性管的是背景图在容器里的起点，默认值 0% 0%，也就是左上角对齐。

三种写法

  • 关键词：left、center、right 搭配 top、center、bottom，九宫格式摆放
  • 百分比：50% 50% 让图片和容器中心对齐，注意百分比是对齐参考点，不是移动距离
  • 像素或 em：精确控制，负值表示图片往左、往上移出容器

雪碧图用的就是负像素。一张图上两个 20px 的图标，取第二个先把 background-repeat 设成 no-repeat，再写 background-position: -20px 0，等于把图片向左推 20px，正好露出第二个图标。图标更多就按 20px 的倍数继续往左取，两张图间隔多少就偏移多少。

百分比为什么反直觉

50% 不是把图片右移一半，而是让图片的 50% 位置对齐容器的 50% 位置，所以 50% 50% 正好居中，0% 和 100% 分别对应左上、右下。理解了参考点这个概念，用百分比做背景位移动画时方向就不容易写反。

和 size、简写的配合

现代写法里，背景位置经常和 background-size 一起放进 background 简写：background: url(icon.png) no-repeat center / 20px 20px;，斜杠后面是尺寸。响应式场景里，center 加 cover 的居中裁切是最省心的组合。

取值判断：图标定位用负像素最直接，居中装饰图用关键词，要随容器缩放就交给百分比加 size。写之前想清楚参考点在哪，方向就不会搞反。