我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值来指定。在CSSSprites中，这个属性被频繁使用。在使用的过程中，经常会摸不着头脑，经常得不到自己想要的效果，于是决定去了解一下它的工作机制。本篇文章就是介绍background-position属性是如何指定背景图片与背景区域的位置关系的。注意：segmentfault不能很好地支持CodePen嵌入。为了使文章整洁，我将删除所有嵌入代码。如需完整体验，请单击此处！background-position我用PS做了一张400px×400px的图片作为背景图片。这里应该有代码，点这里！为了更好的理解background-position属性的定位机制，我们可以把指定的背景区域想象成一个平面笛卡尔坐标系，原点在左上角，x轴的正方向从左到右，y轴正方向为从上到下。点与通常的坐标系不同，向上的方向是y轴的正方向。在该坐标系中，通过指定x、y坐标值定位一个点，即背景图片的左上角。这里应该有代码，点这里！如上图所示，background-position指定了200px和300px的值，即x为200px，y为300px。这个点的位置是背景图的左上角，因为背景图溢出背景区域，裁掉了一部分，只剩下200px×100px的左上角部分。这里应该有代码，点这里！如果可以指定正值，当然也可以指定负值。如上图，此时左上角位于(0px,-300px)，因为向上是y轴的负方向，背景图上半部分的300px被截掉了溢出，只留下400px的下部乘以100px。这里应该有代码，点这里！除了使用绝对值外，还可以使用相对值。当使用相对值时，定位方法在直观上很难理解。但要清楚，最基本的方法是基于绝对值定位。使用相对值时会进行转换，最后根据绝对值指定背景图片的左上角。转换的依据是x=（容器的宽度-图片的宽度）*percentX；y=（容器的高度-图像的高度）*percentY。上图经过计算，背景图的左上角位于(-200px,0px)，所以背景图被裁掉了一半。这里应该有代码，点这里！我们也可以通过关键字top、bottom、left、right、center来指定background-position属性。每个人都应该喜欢这种简单明了的方式。一般指定两个关键字，如果只有一个，另一个默认为居中。这种方式最终会转化为绝对定位，但会先转化为百分比，top、bottom、left、right、center分别相当于0%、100%、0%、100%、50%。背景位置：右下；背景位置：100%100%；在上图中具有相同的效果。CSSSprites使用上面介绍的理解方法，相信对background-position的定位原理还是很好理解的。我觉得background-position的大部分使用场景应该是CSSSprites。CSSSprites是一种处理网页图像的应用程序，它将页面中涉及的所有零星图像都包含到一个大图像中。这样，客户端在访问页面时，只需要向服务端请求少量的图片即可。图片越多，请求次数越少，延迟的可能性越小，可以有效减轻服务器压力；然后应用CSS属性的background-image和background-position的组合来进行背景定位，可以通过数字准确定位背景图片的位置。参考资料CSS背景：css背景属性全解析background-positionCSSSprites
