選單 Menu
計數器 Counter
TODAY : 324324324
YESTERDAY : 496496496
TOTAL : 1338460133846013384601338460133846013384601338460
網頁知識 : 網頁設計:CSS 3背景新屬性Multiple background
作者 設計師 於 2012年02月03日 17:34:02 (12219 次閱讀)

CSS 3背景新屬性:Multiple background

Multiple background設置多重背景圖

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

範例展示

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



width:500px;height:286px;background: url(multiple_bg01.png) no-repeat 386px 130px,url(multiple_bg02.png) no-repeat left top,url(multiple_bg03.png) no-repeat 0px 185px;

完成效果



P.S

可配合:
background-image | background-repeat | background-attachment | background-position | background-origin | background-clip | background-size 等屬性,產生不同的效果,以上屬性都可多重設置,唯有background-color不能設置多重。
  • 每組屬性間使用逗號分隔。
  • 如果設置的多重背景圖片之間有交集(即位置有重疊關係),語法中先寫入的背景圖會附蓋在後寫入的背景圖之上,類似圖層的概念,例如範例中由上而下(圖層):背景1(樹)>背景2(天空)>背景3(草地)。

延伸閱讀