CSS学习(二):背景图片如何定位?

我们都知道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-imagebackground-position的组合进行背景定位,用数字精确地定位出背景图片的位置。


参考资料

Copyright © 2021 DukeLuo Blog

Powered by Hexo • Theme Candelas