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

2020-03-22 19:40:28

字體：大中小

來源：轉載

供稿：網友

已經介紹過不少關于CSS3的的教程，大家可以自己搜索一下，本文我們將學習background-image，它可以讓我們可使用多背景圖。我們一般都是使用偽對象來實現的解決方案，如使用:first-letter，:first-line，:befor，:after等；又或是使用多個無意義標記堆疊來實現；又或是其它的什么方法。當然，方法沒有錯誤，有的只是尋求最適合和最簡單的。相信在CSS3 multiple background-image尚未出現之前，亦沒有人會說自己的某某方法是最佳的，有的只是滿足需求的一些變通方案（即使是在現在這種CSS3尚未被所有瀏覽器支持的情況下，是否要在項目中使用multiple background-image，也是你必須要考慮的問題)。所謂有需求就會有變化，也許正是基于這樣或那樣的考慮，background-image終于將多背景圖納入了自己勢力的范圍之內。有之前使用background-image的經驗，多背景圖對于你來說，完全是錦上添花，你甚至都不必花更多的時間去了解它，因為多背景圖與之前的單一背景圖并無大的區別，讓我么來看看效果吧：兩者的細微區別：單一背景圖語法：background-image:url(); 多重背景圖語法：background-image:url(),url(),url()... 你會發現多背景圖只是在單一背景圖的基礎上，多添加一層背景圖，就多設置一個url()，每個url()之間以半角逗號分隔。這種方式應該很常見了，比如說多字體間的間隔，不也正是這樣么。組合與拆分寫法：組合：.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;
} 如上組合與拆分這兩種寫法是等效的，依據實際情況使用適合的寫法。拆分寫法中的background-repeat:no-repeat之所以可以縮寫成這樣，是因為該示例代碼中的3個背景的平鋪方式都為no-repeat。完整代碼為： background-repeat:no-repeat,no-repeat,no-repeat;值得注意的地方：如果設置的多重背景圖之間存在著交集（即存在著重疊關系），前面的背景圖會覆蓋在后面的背景圖之上。如果存在著可比性的話，那么這個情況與元素的z-index正好相反，z-index默認下后者會覆蓋前者，當然，其實這2者間不存在可比性，只是都有覆蓋的情況，順帶一提html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：學習CSS的背景圖像屬性background_0

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