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

我们都知道background-position属性用来指定背景图片应该出现的位置，可以使用关键字、绝对值和相对值进行指定。在CSS Sprites中，这个属性使用比较频繁，使用过程中，我常混淆，经常切不到自己想要的效果，于是决定好好理解其工作机制，这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位置关系。

注意：CSDN对CodePen嵌入支持度不是很好，更好体验请猛戳此处！

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的组合进行背景定位，用数字精确地定位出背景图片的位置。

---

参考资料

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

本文永久链接：https://dukeluo.me/2018/07/10/css-bgposition.html