網(wǎng)頁(yè)設(shè)計(jì)中背景圖片的重復(fù)
在網(wǎng)頁(yè)設(shè)計(jì)中，CSS使用background-repeat屬性來(lái)定義背景圖片的重復(fù)，該屬性用法如下：
background-repeat:repeat-x|repeat-y|no-repeat
background-repeat屬性的3個(gè)取值作用如下。
?repeat-x：圖片在x軸方向上重復(fù)。
?repeat-y：圖片在y軸方向上重復(fù)。
?no-repeat：不平鋪，圖片只顯示一次。
【示例】啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為test.html，輸入以下內(nèi)容：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>body {
background-image: url(images/bg.jpg); /*頁(yè)面背景圖片*/
background-repeat: repeat-y; /*頁(yè)面背景圖片縱向重復(fù)*/}
</style>
</head>
<body>
</body>
</html>
顯示結(jié)果如圖1所示，背景圖片在設(shè)計(jì)網(wǎng)頁(yè)時(shí)縱向上進(jìn)行了重復(fù)顯示。背景的原圖如圖2所示。其實(shí)際高度為1像素，這里為了讓讀者看得清楚，因此將其放大了。
提示：在網(wǎng)站建設(shè)時(shí)，如果是要設(shè)置兩個(gè)方向上的平鋪，就不需要設(shè)置屬性值，這時(shí)CSS會(huì)采用默認(rèn)的向橫向和縱向兩個(gè)方向重復(fù)的效果。但是，如果手動(dòng)地設(shè)置repeat-x和repeat-y的兩個(gè)值的話，那么系統(tǒng)會(huì)自動(dòng)認(rèn)定后設(shè)的一種平鋪方式有效，只會(huì)向一個(gè)方向平鋪。