本文參考自：http://www.divcss5.com/rumen/r125.shtml#no1和http://www.w3school.com.cn/cssref/pr_background.asp

在原文的基礎上自己整理出來的，易于理解的版本。

background可以設置背景的一系列屬性，詳細地分開來看的話，共有一下幾種。

background-color? |? background-image? |? background-repeat? |? background-position? |? background-attachment

background-size? ?|? background-origin

其中第一行可以在background中復合著寫，且必須按照我上面排的順序。其中有些屬性也可以省略不寫。

我們先詳細了解一下各個屬性如何用，然后再來說如何復合著寫，按照這個思路來，問題就變得很清楚了。

1.background-color:

這個很簡單，就是設置背景顏色，在設置了background-image的情況下，圖片會將背景覆蓋。

2.background-image：

設置背景，

用法：

background-image:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif)

3.background-repeat:

設置背景圖像的重復情況

4.background-position:

設置背景圖像的位置。

5.background-attachment:

設置背景圖片是否隨滾軸而滾動

用一張圖片來表示一下將這些屬性復合在background里面如何而寫。

示例代碼：

background:#F0F url(ddd.png) repeat-x 20px 20px fixed; 該講的知識也講完了，但是實踐中仍然會有很多錯誤需要我們犯，這里提醒幾點：

有些屬性是需要配合著使用的

• 要想達到position設置的效果，要確保attachment為fixed，不過背景圖片默認為fixed(在CSS的W3教程里面寫的是scroll是默認的，我也不知道啥情況，但是實際上fixed是默認屬性）
• 設置圖片作為背景如果圖片設置圖片在X坐標方向重復，如果再設置圖片在對象位置的左或右位置時將無效，可設置在對象上或下位置開始顯示。
  
• 設置圖片作為背景如果圖片設置圖片在Y坐標方向重復，如果再設置圖片在對象位置的上或下位置時將無效，可設置圖片在對象左或右位置開始顯示。
  
• 如果設置背景完全重復顯示，那設置圖片在對象上下左右位置開始顯示將無線。

總結

以上是生活随笔為你收集整理的CSSbackground的详细使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。