上面這張圖是由3個(gè)小圖片組合而成的。
在使用多個(gè)背景圖時(shí)枣宫，只需把 background-image 屬性的值用逗號(hào)隔開(kāi)，列出想用的圖像洋幻，然后用 background-repeat 定義重復(fù)屬性翅娶，最后用 background-position 定義每張小圖的位置好唯。
HTML代碼：
<div></div>
CSS代碼：
background-image: url(images/scroll_top.jpg),
url(images/scroll_bottom.jpg),
url(images/scroll_middle.jpg);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: center top, center bottom, center top;
scroll_top.jpg
scroll_middle.jpg
scroll_bottom.jpg
用 background-repeat 和 background-position 定義多個(gè)值時(shí)骑篙，定義的順序分別對(duì)應(yīng) background-image 的順序森书。
簡(jiǎn)寫(xiě)：
像上面定義的方式會(huì)比較讓人困惑，尤其是后期需要重新排版或維護(hù)的時(shí)候就更煩了杨名。所以很多Web設(shè)計(jì)師喜歡使用簡(jiǎn)寫(xiě)形式指定多個(gè)背景圖猖毫。
CSS代碼：
background: url(images/scroll_top.jpg) center top no-repeat,
url(images/scroll_bottom.jpg) center bottom no-repeat,
url(images/scroll_middle.jpg) center top repeat-y;
每用一個(gè) url 定義一張圖片的時(shí)候，就把這個(gè)圖片的 位置 和 重復(fù)方式 都定義好了趁蕊。
重點(diǎn)：
多個(gè)背景圖會(huì)一層一層疊在一起仔役，像是 Photoshop 里的圖層。羅列背景圖的順序決定著哪個(gè)圖像在上層骂因。列出的第一個(gè)圖像在最頂層，第二個(gè)圖像在第二層乘盼，最后一個(gè)圖像在最底層俄烁。以前面的代碼為例，卷軸的上部（scrollTop.jpg）在卷軸的底部（scrollBottom.jpg）之上页屠，而底部又在卷軸中部（scrollMiddle.jpg）之上。
HTML與CSS 目錄：HTML與CSS
