有方向的重复（深入）

在前面关于重复的一节中，我们介绍了值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的某个将来版本中会增加这样的值。对现在来说，全部方法就是这些，只能水平平铺、垂直平铺，或者根本不平铺。