4.6 文档背景图片显示位置background-position

属性值：一个或者两个长度值、百分比值或者关键字联合使用

初始值：0% 0%

作用于：所有元素

是否继承：否

百分比值：参照它本身容器的尺寸

计算值：如果是长度则为绝对长度值，如果是其他单位则都是百分比值

background-position通常和background-repeat和background-attachment结合使用。顾名思义，background-position的含义就是显示背景图片的位置，而如果背景图片按照默认样式在水平和垂直方向同时重复，那么设置背景图片显示位置是没有意义的。

如果两个属性值都是百分比值，例如“background-position: 0% 0%”，则表示背景图片定位在左上角，紧靠左侧和上方边界。示例4.9演示了设置背景图片定位于左上角的方法，效果如图4.17所示。

示例4.9

<style>

body { background-image: url(fishing.jpg);

background-repeat: no-repeat;

background-position: 0% 0%; }

</style>

同样，如果两个百分比值为“100% 100%”，则表示背景图片定位于右下角，紧靠右侧和下方边界。示例4.10演示了设置图片定位于右下角的方法，效果如图4.18所示。

图4.17 背景图片定位“0% 0%的效果”

示例4.10

<style>

body { background-image: url(fishing.jpg);

background-repeat: no-repeat;

background-position: 100% 100%; }

</style>

图4.18 背景图片定位“100% 100%的效果”

同理可推，“50%”则表示背景图片处于这个方向的中央。

如果两个属性值都是绝对长度值，例如“background-position: 100px 50px”，则表示背景图片定位的距离于左上角的左侧100像素和距离其上方50像素的地方。示例4.11演示了这样定位的方法，效果如图4.19所示。

示例4.11

<style>

body { background-image: url(fishing.jpg);

background-repeat: no-repeat;

background-position: 100px 50px; }

</style>

除了使用百分比值和绝对长度值定义背景图片位置外，还可以使用一对关键字进行定义，关键字定义法如表4.1所示。

图4.19 用绝对长度值定位背景图片

表4.1 关键字定义法

关键字	等量百分比值	图示
top left left top	0% 0%
top top center center top	50% 0%
right top top right	100% 0%
left left center center left	0% 50%
center center center	50% 50%
right right center center right	100% 50%
bottom left left bottom	0% 100%
bottom bottom center center bottom	50% 100%

续表

关键字

等量百分比值

图示

bottom right

right bottom

100% 100%

如果设计者只给出一个属性值而不是一对，那么它只作用于水平方向，且垂直方向永远限定于“50%”。如果同时给出一对属性值，则第一个属性值作用于水平方向，第二个作用于垂直方向。另外，关键字、绝对长度值和百分比值相互混合使用也是允许的，但是需要注意的是，“left”和“right”只能作用于水平方向，“top”和“bottom”只能作用于垂直方向。