這篇文章給大家分享的是有關(guān)css如何同時(shí)插兩張背景圖片的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

目前成都創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、蓮花網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

在使用多個(gè)背景圖時(shí)，首先把background-image屬性的值用逗號(hào)隔開，列出需要用的圖像；然后用background-repeat定義重復(fù)屬性；最后用background-position定義每張小圖的位置即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在使用多個(gè)背景圖時(shí)，只需把 background-image 屬性的值用逗號(hào)隔開，列出想用的圖像，然后用 background-repeat 定義重復(fù)屬性，最后用 background-position 定義每張小圖的位置。

HTML代碼：

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)寫：

像上面定義的方式會(huì)比較讓人困惑，尤其是后期需要重新排版或維護(hù)的時(shí)候就更煩了。所以很多Web設(shè)計(jì)師喜歡使用簡(jiǎn)寫形式指定多個(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）之上。

感謝各位的閱讀！關(guān)于“css如何同時(shí)插兩張背景圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！