WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-12. CSS 範例再練習 (依需求挑選學習)

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)
那麼就可以只改變指定的背景項目。

 

go TOP