18947
次閱讀

CSS 3背景新屬性：Multiple background

Multiple background設置多重背景圖

此為CSS 3背景background的新屬性，可以同時置放多張圖片當作背景。 一樣只支援較新的瀏覽器，瀏覽器的支援度，可參考《CSS 3背景新屬性：background-size》，這裡就不再詳細贅述。

範例展示

以下3張圖片，是範例中會使用的背景圖：




完成效果



P.S

可配合：
background-image | background-repeat | background-attachment | background-position | background-origin | background-clip | background-size 等屬性，產生不同的效果，以上屬性都可多重設置，唯有background-color不能設置多重。

• 每組屬性間使用逗號分隔。
• 如果設置的多重背景圖片之間有交集(即位置有重疊關係)，語法中先寫入的背景圖會附蓋在後寫入的背景圖之上，類似圖層的概念，例如範例中由上而下(圖層)：背景1(樹)>背景2(天空)>背景3(草地)。

延伸閱讀

• CSS 背景屬性background
• CSS 3背景新屬性：background-size
• CSS 3背景新屬性：background-origin
• CSS 3背景新屬性：background-clip