CSS 背景 加強範例
背景基本屬性
| 版本 |
屬性 |
說 明 |
| 1 |
background |
複合屬性。合併縮寫所有基本的背景屬性設定。
參考【英文版】
【簡中版】 |
| 1 |
background-attachment |
設置背景圖像是隨對象內容滾動還是固定的。
參考【英文版】
【簡中版】 |
| 1 |
background-color |
設置對象的背景顏色。
參考【英文版】
【簡中版】 |
| 1 |
background-image |
設置對象的背景圖像。
參考【英文版】
【簡中版】 |
| 1 |
background-position |
設置對象的背景圖像位置。
參考【英文版】
【簡中版】 |
| 1 |
background-repeat |
設置對象的背景圖像如何鋪排填充。
參考【英文版】
【簡中版】 |
背景新屬性
| 版本 |
屬性 |
說 明 |
| 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 區塊：背景尺寸範例測試
#b3區塊：多重背景範例測試
※ 1 版的background各屬性可以合併縮寫在 background:......,
但是 3 版的新屬性不能合併縮寫在 background:........
※ 當設定 background: ..... 屬性時, 前面所有相關的 background 設定將被取代,
如果先設定 background: .....,
後面設定其中一個背景設定 (例如: background-color)
那麼就可以只改變指定的背景項目。