在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，背景圖片是一個(gè)非常重要的元素之一。使用CSS屬性給頁(yè)面設(shè)置背景圖片，可以為網(wǎng)頁(yè)增添一份美麗和藝術(shù)感。而在使用背景圖片時(shí)，我們一般需要設(shè)置它的重復(fù)方式，即是否平鋪。下面我們來(lái)了解一下CSS中如何實(shí)現(xiàn)上下平鋪。

在CSS中，通過(guò) background-repeat 屬性來(lái)設(shè)置背景圖片的平鋪方式。這個(gè)屬性有四個(gè)可能的值：

background-repeat: repeat;           /* 默認(rèn)值，背景圖片在 X 方向和 Y 方向都進(jìn)行平鋪 */
background-repeat: repeat-x;         /* 只在 X 方向進(jìn)行平鋪 */
background-repeat: repeat-y;         /* 只在 Y 方向進(jìn)行平鋪 */
background-repeat: no-repeat;        /* 不進(jìn)行平鋪 */

其中，我們可以使用repeat-y值來(lái)實(shí)現(xiàn)背景圖片在上下方向的平鋪。

body {
background-image: url("bg.jpg");
background-repeat: repeat-y;
}

在上面這個(gè)例子中，我們?cè)O(shè)置了bg.jpg作為頁(yè)面的背景圖片，并又通過(guò)repeat-y屬性值讓它在垂直（Y）方向不斷地平鋪。這樣設(shè)置后，我們的頁(yè)面就有了一個(gè)上下平鋪的背景圖片。

除了使用背景圖片，我們?cè)陧?yè)面設(shè)計(jì)中還有很多其他的背景元素可以進(jìn)行設(shè)置。如使用純色、漸變色甚至是靜態(tài)圖像等。只要掌握了 CSS 的基本語(yǔ)法和方法，我們可以輕松地實(shí)現(xiàn)各種各樣的網(wǎng)頁(yè)效果。