有方向的重复

过去，如果网站建设人员想要某种“边栏式（sidebar）”背景，必须创建一个很短但非常宽的图像放在背景上。有一段时间，这种图像的最佳大小是10像素高1,500像素宽。当然，图像的大部分都是空白，只有左边100像素左右包含“边栏”图像。图像的余下部分基本上都被浪费了。

如果能创建一个只有10像素高100像素宽的边栏图像，而没有浪费的空白空间，然后只在垂直方向上重复这个图像，这样不是更高效吗？这肯定会让网页设计者的设计工作容易一些，而且用户的下载也会快得多。下面来看background-repeat。

background-repeat值：

repeat | repeat-x | repeat-y | no-repeat | inherit

初始值：repeat

应用于：所有元素

继承性：无

计算值：根据指定确定

你可能猜得到，repeat导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。

默认地，背景图像将会从一个元素的左上角开始（本章后面将介绍如何改变这种默认行为）。因此，以下规则将得到如图9-17所示的结果：

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

background-repeat: repeat-y;}

图9-17：垂直平铺背景图像

（为了让规则尽量简短，这里省略了背景颜色，不过要记住，只要有背景图像就应该同时包含一个背景颜色。）

不过，假设网页设计者希望图像在文档的顶端重复。不必为此创建一个特殊图像，使其下面全部都是空白，只需对规则做一个小改动：

body{background-image:url(yinyang.gif)；

background-repeat:repeat-x;}

如图9-18所示，这个图像会从其起点沿着x轴重复（也就是水平重复），在这里就是从浏览器窗口的左上角开始水平重复。

最后，你可能根本不希望重复背景图像。在这种情况下，可以使用值no-repeat:

body{background-image:url(yinyang.gif)；background-repeat:no-repeat;)

这个值看上去可能用处不大，因为这个声明只会把一个小图像放在文档的左上角，不过再来看一个大得多的符号，如图9-19所示：

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

background-repeat:no-repeat;}

图9-18：水平平铺

图9-19：放一个大背景图像

由于能控制重复方向，这使得可能达到的效果大大增加。例如，假设网页设计者希望文档中每个h1元素的左边有一个三重边框。可以把这个概念再进一步，在每个h2元素的顶端设置一个波浪线边框。图像采用特定方式着色，使之能与背景色混合，得到图9-20所示的波浪效果：

h1{background-image:url(Criplebor.gif);background-repeat:repeat-y;}

h2{background-image:url(wavybord.gif);background-repeat:repeat-x;background-color:#CCC;}

图9-20：对有背景图像的元素加边框

仅仅通过选择适当的图像，并用某种创造性的方式加以使用，就可以创建一些非常有意思的效果。还不仅如此。既然你已经知道了如何限制一个背景图像的重复，那么如何让它在背景区内移动呢？