CSS3：background-image可使用多背景圖

2020-03-22 19:40:28

字體：大中小

供稿：網(wǎng)友

已經(jīng)介紹過(guò)不少關(guān)于CSS3的的教程，大家可以自己搜索一下，本文我們將學(xué)習(xí)background-image，它可以讓我們可使用多背景圖。我們一般都是使用偽對(duì)象來(lái)實(shí)現(xiàn)的解決方案，如使用:first-letter，:first-line，:befor，:after等；又或是使用多個(gè)無(wú)意義標(biāo)記堆疊來(lái)實(shí)現(xiàn)；又或是其它的什么方法。當(dāng)然，方法沒(méi)有錯(cuò)誤，有的只是尋求最適合和最簡(jiǎn)單的。相信在CSS3 multiple background-image尚未出現(xiàn)之前，亦沒(méi)有人會(huì)說(shuō)自己的某某方法是最佳的，有的只是滿(mǎn)足需求的一些變通方案（即使是在現(xiàn)在這種CSS3尚未被所有瀏覽器支持的情況下，是否要在項(xiàng)目中使用multiple background-image，也是你必須要考慮的問(wèn)題)。所謂有需求就會(huì)有變化，也許正是基于這樣或那樣的考慮，background-image終于將多背景圖納入了自己勢(shì)力的范圍之內(nèi)。有之前使用background-image的經(jīng)驗(yàn)，多背景圖對(duì)于你來(lái)說(shuō)，完全是錦上添花，你甚至都不必花更多的時(shí)間去了解它，因?yàn)槎啾尘皥D與之前的單一背景圖并無(wú)大的區(qū)別，讓我么來(lái)看看效果吧：兩者的細(xì)微區(qū)別：?jiǎn)我槐尘皥D語(yǔ)法：background-image:url(); 多重背景圖語(yǔ)法：background-image:url(),url(),url()... 你會(huì)發(fā)現(xiàn)多背景圖只是在單一背景圖的基礎(chǔ)上，多添加一層背景圖，就多設(shè)置一個(gè)url()，每個(gè)url()之間以半角逗號(hào)分隔。這種方式應(yīng)該很常見(jiàn)了，比如說(shuō)多字體間的間隔，不也正是這樣么。組合與拆分寫(xiě)法：組合：.test{
background:url(1.jpg) no-repeat,url(2.jpg) no-repeat 25px 25px,url(3.jpg) no-repeat 50px 50px;
}拆分：.test{
background-image:url(1.jpg),url(2.jpg),url(3.jpg);
background-repeat:no-repeat;
background-position:0 0,25px 25px,50px 50px;
} 如上組合與拆分這兩種寫(xiě)法是等效的，依據(jù)實(shí)際情況使用適合的寫(xiě)法。拆分寫(xiě)法中的background-repeat:no-repeat之所以可以縮寫(xiě)成這樣，是因?yàn)樵撌纠a中的3個(gè)背景的平鋪方式都為no-repeat。完整代碼為： background-repeat:no-repeat,no-repeat,no-repeat;值得注意的地方：如果設(shè)置的多重背景圖之間存在著交集（即存在著重疊關(guān)系），前面的背景圖會(huì)覆蓋在后面的背景圖之上。如果存在著可比性的話(huà)，那么這個(gè)情況與元素的z-index正好相反，z-index默認(rèn)下后者會(huì)覆蓋前者，當(dāng)然，其實(shí)這2者間不存在可比性，只是都有覆蓋的情況，順帶一提html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：學(xué)習(xí)CSS的背景圖像屬性background_0

下一篇：CSS屬性選擇器的四種格式