百分数值

网站建设中百分数值与关键字紧密相关，不过其表现方式更为复杂。假设网站建设人员希望用百分数值将原图像在其元素中居中。这很容易：

p{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-position:50% 50%;}

这会导致原图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和原图像。

下面更详细地分析这个过程。将原图像在一个元素中居中时，图像中描述为50% 50%的点（中心点）与元素中描述为50% 50%的点（中心点）对齐。如果图像位于0%0%,

其左上角将放在元素内边厍区的左上角。如果图像位置是100% 100%，会使原图像的右下角放在内边距区的右下角：

p{background-image:url(oransqr.gif)；background-repeat:no-repeat;

padding:Spx;border:1px dotted gray;}

p.cl{background-position:0%0%;}

p.c2(background-position:50%50%;}

p.c3{background-position:100%100%;}

p.c4{background-position:0%100%;}

p.c5{background-position:100%0%;}

因此，如果网页设计者想将一个原图像放在水平方向1/3。垂直方向2/3处，可以声明如下：

p{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-positiori:33% 66%;}

利用这些规则，原图像中从图像左上角水平向右1/3、垂直向下2/3处的点将与离包含元素左上角最远的点对齐。注意，如果用百分数设置位置，水平值总是先出现。如果在上例中将百分数值的顺序换一下，图像将放在元素中水平向右2/3、垂直向下丨/3处。

如果只提供了一个百分数值，所提供的这个值将用作为水平值，垂直值假设为50%，这与关键字类似，即如果只指定了一个关键字，另一个关键字则假设为center。例如：

p(background-image:url(yinyang.gif)；

background-repeat:no-repeat;

background-position:25%;}

原图像位于元素内容区和内边距区水平向右1/4，垂直向下1/2处。

等价关键字

等价百分数

center

center center

50% 50%

50%

top

top center

center top

50% 0%

bottom

bottom center

center bottom

50% 100%

right

center right

100% 50%

right center

100%

left

center left

0% 50% 

left center

0% 

top left

left top

0% 0%

top right

right top

100% 0%

bottom right

right bottom

100% 100%

bottom left

left bottom

0% 100%

你在建设网站可能会奇怪，background-position的默认值是0% 0%，这在功能上就相当于top left。正是因为这个原因，背景图像总是从元素内边距区的左上角开始平铺，除非你设置了不同的位置值。