CSS学习（二）：背景图片如何定位？

咱们都知道background-position属性用来指定背景图片应该出现的位置，可使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使用比较频繁，使用过程当中，我常混淆，常常切不到本身想要的效果，因而决定好好理解其工做机制，这篇文章就是介绍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属性，你们应该都喜欢这种简单明了的方式吧。通常指定两个关键字，若是只有一个，则另外一个默认是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的组合进行背景定位，用数字精确地定位出背景图片的位置。

---

参考资料

• CSS背景:css background属性全解析
• background-position
• CSS Sprites