在前面关于重复的一节中,我们介绍了值repeat-x、repeat-y和repeat,并说明了它们在网站建设中对背景图像的平铺有何影响。不过,对于这些值,平铺模式总是从包含元素(例如P)的左上角开始。当然,并不要求如此,我们已经看到,background-position的默认值是0% 0%。所以,除非改变原图像的位置,否则平铺就会从左上角开始。不过,既然网站建设人员知道了如何改变原图像的位置,接下来需要了解用户代理如何处理这种情况。
要介绍这个内容,最容易的办法就是先提供一个例子,再作相应的解释。考虑以下标记,其结果如图9-30所示:
P{background-image:url(yinyang.gif);background-position:center;border:1px dotted gray;}
p.cl(background-repeat:repeat-y;)
p.c2(background-repeat:repeat-x;)
图9-30:居中原图像并重复
可以看到结果:“图条”穿过了元素的中心。看上去可能不对,但这并没有错。
图9-30所示的例子是正确的,因为原图像放在第一个p元素的中心,然后沿着y轴在两个方向上平铺,换句话说,同时向上和向下平铺。对于第二个段落,图像则分别向右和向左重复。
因此,将一个大图像设置在P的中心,再让它充分重复,将导致它在4个方向上都平铺,即向上、向下、向左和向右。background-position造成的唯一差别是确定平铺从哪里开始。图9-31显示了从元素中心平铺和从元素左上角平铺的差别,
注意元素各边界上的差别。当背景从中心重复时(如第一段中),阴阳符号网格在元素内居中,这会在各边界上得到一致的“剪裁”效果。在第二段中,平铺从内边距区左上角开始,所以剪裁是不一致的。看上去差别可能很小,不过在网站建设人员的设计生涯中,这两种方法都很可能需要用到。
图9-31:从中心重复和从左上角重叠的差别
如果网页设计师还想知道其他控制重复的方法,需要指出,除了前面讨论的再没有别的方法了。例如,不存在repeat-left,不过可能CSS的某个将来版本中会增加这样的值。对现在来说,全部方法就是这些,只能水平平铺、垂直平铺,或者根本不平铺。