我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使用比较频繁，使用过程中，我常混淆，经常切不到自己想要的效果，于是决定好好理解其工作机制，这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位置关系。
background-position
我使用ps制作了一张400px × 400px的图片作为背景图片。
See the Pen background-position-1 by Duke (@Haier) on CodePen.
为了更好理解`background-position`属性定位的机制，我们可以将指定背景区域想象为一个平面直角坐标系，原点在左上角，x轴正方向从左到右，y轴正方向从上到下，这点和平常向上为y轴正方向的坐标系有所不同。在这个坐标系中，通过指定x、y的坐标值定位一个点，此点即是背景图片的左上角。See the Pen background-position-2 by Duke (@Haier) on CodePen.
如上图所示，`background-position`指定值`200px`和`300px`，即x为`200px`，y为`300px`，此点所在位置就是背景图片的左上角，因为部分背景图片因溢出背景区域被裁剪，就只剩下200px × 100px的左上角部分。See the Pen background-position-3 by Duke (@Haier) on CodePen.
可以指定正值就当然可以指定负值，如上所示，此时左上角被定位在`(0px, -300px)`处，因为向上为y轴负方向，背景图片上半的300px就因溢出被切除了，只留下400px × 100px的下部分。See the Pen background-position-4 by Duke (@Haier) on CodePen.
除了使用绝对值，也可以使用相对值指定。使用相对值时，定位方式直观上不好理解。但应清楚，最基本的方法是根据绝对值定位。使用相对值时它会将其转换，最终还是根据绝对值指定背景图片的左上角，转化的依据是**`x = (容器的宽度-图片的宽度) * percentX;y = (容器的高度-图片的高度) * percentY`**。上图经过计算，背景图片左上角被定位在`(-200px, 0px)`处，故背景图片被切除一半。See the Pen background-position-5 by Duke (@Haier) on CodePen.
我们也可以通过关键字`top`、`bottom`、`left`、`right`和`center`指定`background-position`属性，大家应该都喜欢这种简单明了的方式吧。一般指定两个关键字，如果只有一个，则另一个默认是`center`。这种方式也最终将转化成绝对值定位，不过先会转换成百分比，`top`、`bottom`、`left`、`right`和`center`分别相当于`0%`、`100%`、`0%`、`100%`和`50%`。上图中的`background-position: right bottom;`和`background-position: 100% 100%;`效果是一模一样的。CSS Sprites
使用上面介绍的理解方式，相信还是很好理解background-position的定位原理的。我想，background-position多数使用场景应该就是CSS Sprites了。CSS Sprites是一种网页图片应用处理方式，将一个页面涉及到的零星图片都包含到一张大图中去。这样一来，当访问该页面时，客户端只需要向服务器请求少量的图片，图片越多请求次数越少，造成延迟的可能性也就越小，能有效减轻服务器的压力；接下来应用CSS属性的background-image、background-position的组合进行背景定位，用数字精确地定位出背景图片的位置。