长度值

最后，我们来看定位的长度值。在为原图像的位置提供长度值时，这些长度值将解释为从元素内边距区左上角的偏移。偏移点是原图像的左上角。因此，如果网站建设人员设置值为20px 30px，原图像的左上角将在元素内边距区左上角向右20像素，向下30像素的位置上，如图9-25所示：

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

background-repeat:no-repeat;

background-position:20px 30px;

border:1px dotted gray;}

图9-25：使用长度度设置背景图像的偏移

这与网页设计中百分数值大不相同，因为偏移只是从一个左上角到另一个左上量角的偏移。换句话说，原图像的左上角与background-position声明中指定的点对齐。不过，网页设计师可以结合使用长度和百分数值，得到“二者兼俱”的效果。假设设计师需要一个背景图像，它要一直延伸到元素的右边，并且要从顶部向下延伸10像素，如图9-26所示。像以往一样，先指定水平值：

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

background-repeat:no-repeat;

background-position:100% l0px;

border:1px dotted gray;}

图9-26：结合使用百分数值和长度值

警告：在网站建设CSS2.1之前的版本中，不能将关键字与其他值混合使用。因此，top 75%是非法的，如果使用了一个关键字，就只能一直使用关键字，CSS2.1为了让创作人员更容易地设计布局，且考虑很多其他浏览器已经支持这种功能，所以在这方面有所改变，允许关键字与其他值混用。

如果使用长度值或百分数值，可以使用负值将原图像拉出元素的背景区。考虑一个例子，使用一个很大的“阴阳”符号作为背景。有时可能要将其居中，不过如果你只希望其中一部分在元素内边距区的左上角可见，该怎么做呢？没问题，至少从理论上讲是可以做到的。

首先，假设原图像为300像素高300像素宽。再假设只有其右下方1/3的部分可见。可以如下得到所需的效果（如图9-27所示）：

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

background-repeat:no-repeat;

background-position:-200px-200px;

border:1px dotted gray;}

或者，假设网站建设人员只希望原图像的右半部分可见，并在元素中居中，可以如下设置规则：

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

background-repeat=no-repeat;

background-position:-150px 50%;

border:1px dotted gray;}

理论上负百分数值也是允许的，不过对此存在两个问题。第一个问题是用户代理可能有限制，无法识别负的background-position值。另一个问题是，负百分数值计算起来很有意思。比方说，原图像和元素很可能大小不同而这会导致意想不到的后果。例如，考虑以下规则:

p{background-image:url(pix/bxgyinyang.gif)；

background-repeat:no-repeat;

background-position:-10%-10%;

border:1px dotted gray;width:500px;}

这个规则要求原图像外由-10%-10%定义的点与各段落中同样定义为-10%-10%的一个点对齐。图像的宽度和高度都是300像素，所以我们知道，其对齐点可以描述位于图像顶部之上30像素。左边界再向左30像素的位置（也就是-30px X-30px）。段落元素的宽度都相等（500px），所以水平对齐点是其内边距区左边界再向左50像素处。这说明，每个原图像的左边界将在段落左内边距边界向左20像素的位置。这是因为，图像的-30px对齐点与段落的-50px点对齐。二者之间相差20像素。

不过，各段落的高度不同，所以每个段落的垂直对齐点都不同。半随机地选择一个例子，如果一个段落为300像素高，原图像的顶端将与元素内边距区的顶端对齐，因为二者的垂直对齐点都是-30px。如果一个段落高度为50像素，其对齐点将是-5px，相应地，原图像的顶端实际上将在内边距区顶端向下25像素处。

正百分数值也可能出现同样的问题（可以想象一下，如果将原图像与比该图像矮的一个元素的底端对齐，会发生什么情况），所以，以上介绍并不是说不应该使用负值，而只是提醒网站建设人员往往存在一些要考虑的问题。

在这一节中，每个例子使用的重复值都是no-repeat。原因很简单：如果只有一个背景图像，可以更容易地査看定位对第一个背景图像的放置有何影响。不过，完全没必要阻止背景图像重复：

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

background-position:-150px 50%;

border:1px dotted gray;}

所以，允许背景图像重复时，从图9-29可以看到，平铺模式将从background-position指定的位置开始。

图9-29 ：使用background-position属性设置平铺模式的起点

这再一次说明了原图像的概念，对于理解下一节非常重要。