HTML+CSS:背景图片位置设置技巧

CSS允许使用background-position属性设置背景图片的初始位置，这一属性的值可以是位置关键字、长度数值或者百分比。多数情况下，这一属性会配合background-repeat属性的no-repeat（不重复图片）一起使用。设置background-position属性的值时，形式如下：

位置关键字有五个：left（水平居左）、right（水平居右）、top（垂直居顶）、bottom（垂直居底）、center（水平或垂直居中）。水平方向上的关键字包括left、right和center，垂直方向上的关键字包括top、bottom和center。以关键字为值时，浏览器会自动判断当前值是水平属性还是垂直属性，值的顺序并不重要。

动手写12.1.6 设置背景图片位置

“动手写12.1.6”中demo类的div元素的背景图片在水平方向上居左，在垂直方向上居中。本例的效果如图12.1.5所示：

图12.1.5　设置元素的背景图片位置

background-position属性的关键字也可以使用单值，这个时候另外一个缺失的值会用center代替。

动手写12.1.7 仅设置水平方向的背景图片位置

动手写12.1.8 仅设置垂直方向的背景图片位置

(www.xing528.com)

动手写12.1.9 设置背景图片位置居中

另外一种常用的表示方式是百分比。以水平方向为例，位居最左以0%表示，位居最右以100%表示，居中则以50%表示。

动手写12.1.10 设置背景图片位置为百分比

提示

当background-position属性的值为负值或超出最大位置（100%）时，图片会部分或全部隐藏。利用这个特性，我们可以把很多元素的背景图片制作在一张图片上，这样不但超出的部分不会显示，而且有利于优化图片的加载速度。这种形式的背景图也被叫作CSS雪碧图（CSS Sprite）。

当背景图片为多张时，背景位置会同时对多张图片生效。我们也可以分别设置各张图片的位置，用逗号分隔，background-repeat值的顺序和background-image一致。

动手写12.1.11 设置多张背景图片的位置

“动手写12.1.11”中，第一张背景图片“雪花.png”的位置是左上角，第二张背景图“星星.png”的位置是元素正中。