CSS 背景樣式屬性
版本 | 屬性 | 說 明 |
---|---|---|
1 | background | 複合屬性。合併縮寫所有基本的背景屬性設定。 參考【英文版】 【簡中版】 |
1 | background-attachment | 設置背景圖像是隨對象內容滾動還是固定的。 參考【英文版】 【簡中版】 |
1 | background-color | 設置對象的背景顏色。 參考【英文版】 【簡中版】 |
1 | background-image | 設置對象的背景圖像。 參考【英文版】 【簡中版】 |
1 | background-position | 設置對象的背景圖像位置。 參考【英文版】 【簡中版】 |
1 | background-repeat | 設置對象的背景圖像如何鋪排填充。 參考【英文版】 【簡中版】 |
CSS3 背景樣式新屬性
版本 | 屬性 | 說 明 |
---|---|---|
3 | background-size | 設置對象的背景圖像的尺寸大小。 參考【英文版】 【簡中版】 |
3 | background-clip | 指定對象的背景圖像向外裁剪的區域。 參考【英文版】 【簡中版】 |
3 | background-origin | 設置背景圖像計算background-position時的參考原點。 參考【英文版】 【簡中版】 |
背景尺寸範例已設定好的部份
<div id="b1"></div> <div id="b2"></div> <div id="b3"></div> <style> div { margin: 10px; border: 2px solid #666; background-image: url(選擇背景影像檔); } #b1 { width: 500px; height: 150px; } #b2 { width: 200px; height: 300px; } #b3 { width: 900px; height: 400px; } </style>
#b1 與 #b2 區塊:背景尺寸範例測試
#b1
#b2
設定 background-size
目前背景影像的定位原點在「左上角」
#b3 區塊:多重背景範例測試
※ 1 版的background各屬性可以合併縮寫在 background:......,
但是 3 版的新屬性不能合併縮寫在 background:........
※ 當設定 background: ..... 屬性時, 前面所有相關的 background 設定將被取代,
如果先設定 background: .....,
後面設定其中一個背景設定 (例如: background-color)
那麼就可以只改變指定的背景項目。