必須掌握的CSS知識-background屬性

css允許使用純色作為背景，同樣也允許使用圖片作為背景。
關於背景的設定：

• background-color

   background-color:red;

  —注意：background-color不能繼承，其預設值是transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

• background-image

   background-image:url(lks.jpg);

  —注意：背景圖片也是不能繼承的，而且背景圖片無法設定大小。
  瀏覽器對圖片格式的支援情況：

• gif 動畫 256種顏色

• jpg 顏色豐富，瀏覽器支援效果好

• png w3c推薦的格式，但是瀏覽器支援的不太好（IE6，IE7，不支援）。

• background-repeat

  background-repeat:repeat;        //預設 背景映像將在垂直方向和水平方向重複。background-repeat:repeat-x;      //背景映像將在水平方向重複。background-repeat:repeat-y;      //背景映像將在垂直方向重複。background-repeat:no-repeat;     //背景映像將僅顯示一次。

• background-attachment

  background-attachment:scroll;    //預設值。背景映像會隨著頁面其餘部分的滾動而移動。background-attachment:fixed;     //當頁面的其餘部分滾動時，背景映像不會移動。

• background-position
  —注意：您需要把 background-attachment 屬性設定為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。

• background-position：top left；
  第一個是指垂直方向上，第二個是指在水平方向上，中間空格隔開。
  垂直方向上可以設定：top、center、bottom；
  水平方向上可以設定：left、 center 、right；
  如果您僅規定了一個關鍵詞，那麼第二個值將是"center"。

• background-position：50% 50%；
  預設值：0% 0%。
  第一個值是水平位置，第二個值是垂直位置。
  左上方是 0% 0%。右下角是 100% 100%。
  如果您僅規定了一個值，另一個值將是 50%。

• background-position：20px 30px；
  第一個值是水平位置，第二個值是垂直位置。
  左上方是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
  如果您僅規定了一個值，另一個值將是50%。

注意：

1、當我們為body設定border後，我們會發現border只是圈住了body裡面有內容的地方。但是為body設定背景色，則填充整個螢幕。
2、使用映像作為背景時，映像他的定位是參照螢幕的可視地區，而不是被border框住的部分。
3、當我們想要一次性設定背景時，我們順序是有考究的。
background：red url(xin.jpg) norepeat fixed center center;
每個參數使用空格隔開，依次是顏色，圖片，重複，固定方式，位置。
事實上，我在瀏覽器中對他們的位置進行了各種顛倒後，發現IE6、IE7不是能很好的支援亂序後的設定，但是現代瀏覽器還是可以支援的。為了相容性的考慮，建議使用上面的順序。

歡迎補充與指正

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程