CSS中有一個非常有用的功能，就是可以讓元素在水平方向上重復。這個功能可以讓頁面看起來更加有趣和生動。
background-image: url('image.png');
background-repeat: repeat-x;上面的代碼是實現水平方向重復的最基本代碼。其中，background-image指定了重復的背景圖片，而background-repeat則指定了重復方式。在這里，我們指定為repeat-x，表示在水平方向上重復。
通過這種方式，我們可以很容易地為整個頁面添加背景效果：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background-image: url('bg.png');
background-repeat: repeat-x;
}上面的代碼實現了為整個頁面添加背景圖，并且讓其在水平方向上重復。
除了可以為整個頁面添加背景圖，我們還可以為單個元素添加水平重復效果：
div {
background-image: url('bg.png');
background-repeat: repeat-x;
height: 200px;
width: 100%;
}上面的代碼為一個
元素添加了背景圖，并且讓其在水平方向上重復。由于我們指定了一個固定高度，所以這個元素在豎直方向上不會有滾動條。
當然，還有其他一些關于水平重復的設置可以用到：
background-repeat: repeat-x; // 在水平方向上重復 background-repeat: repeat-y; // 在豎直方向上重復 background-repeat: repeat; // 在水平和豎直方向上重復 background-repeat: no-repeat; // 不重復
我們可以根據自己的需求來選擇合適的屬性。