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