通過 CSS 背景屬性，可以給頁面元素添加背景樣式。背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。
背景顏色background-color 屬性定義了元素的背景顏色。
<style>/* 支持英語單詞,rgb,以及十六進位顏色碼 */background-color:顏色值;</style>一般情況下元素背景顏色默認值是 transparent（透明），我們也可以手動指定背景顏色為透明色。
<style>/* 設置為透明色 */background-color: transparent;</style>示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS背景</title> <style>body{ /* 設置body標籤背景顏色為yellow */ background-color:yellow;}h1{ /* 設置h1標籤背景顏色為#00ff00 */ background-color:#00ff00;}p{ /* 設置p標籤背景顏色為rgb(255,0,255) */ background-color:rgb(255,0,255);}</style></head>
<body><h1>這是標題 1</h1><p>這是一個段落。</p></body>
</html>背景圖片background-image 屬性描述了元素的背景圖像。實際開發常見於 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優點是非常便於控制位置.
<style>background-image : none | url (url)</style>屬性講解:
值描述url('URL')指向圖像的路徑。none默認值。不顯示背景圖像。示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS背景</title> <style>body { /* 設置背景圖像為01.gif */ background-image:url('01.gif');}</style></head>
<body><h1>Hello World!</h1></body>
</html>注意：背景圖片後面的地址，千萬不要忘記加 URL， 同時裡面的路徑不要加引號。
背景平鋪如果需要在 HTML 頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。
<style>background-repeat: repeat | no-repeat | repeat-x | repeat-y</style>參數講解:
值描述repeat默認。背景圖像將在垂直方向和水平方向重複(平鋪)。repeat-x背景圖像將在水平方向重複(平鋪)。repeat-y背景圖像將在垂直方向重複(平鋪)。no-repeat背景圖像將僅顯示一次(不平鋪)。示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS背景</title><style>body{ background-image:url('01.gif'); background-repeat:repeat-y;}</style></head>
<body><p>repeat-y 設置只有垂直方向重複 background-image</p></body></html>背景圖片位置利用 background-position 屬性可以改變圖片在背景中的位置。
<style>background-position: x y;</style>參數代表的意思是：x 坐標和 y 坐標。可以使用 方位名詞 或者 精確單位
參數講解:
示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS背景</title> <style>body{ background-image:url('01.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }</style></head>
<body><p><b>注意：</b>該屬性工作在 Firefox 和 Opera, background-attachment 屬性會被設置為 "fixed"。</p></body></html>注意:
1.參數是方位名詞 如果指定的兩個值都是方位名詞，則兩個值前後順序無關，比如 left top 和 top left 效果一致 如果只指定了一個方位名詞，另一個值省略，則第二個值默認居中對齊2.參數是精確單位 如果參數值是精確坐標，那麼第一個肯定是 x 坐標，第二個一定是 y 坐標 如果只指定一個數值，那該數值一定是 x 坐標，另一個默認垂直居中3.參數是混合單位 如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是 x 坐標，第二個值是 y 坐標
背景圖像固定（背景附著）background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其餘部分滾動。
<style>background-attachment : scroll | fixed</style>屬性講解:
值描述scroll默認值。背景圖像會隨著頁面其餘部分的滾動而移動。fixed當頁面的其餘部分滾動時，背景圖像不會移動。示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS背景</title><style>body {background-image:url('01.gif');background-repeat:no-repeat;background-attachment:fixed;}</style></head>
<body><p>背景圖片是固定的。嘗試向下滾動頁面。</p><p>背景圖片是固定的。嘗試向下滾動頁面。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p><p>背景圖片是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。</p></body>
</html>背景複合寫法為了簡化背景屬性的代碼，我們可以將這些屬性合併簡寫在同一個屬性 background 中。從而節約代碼量. 當使用簡寫屬性時，沒有特定的書寫順序,一般習慣約定順序為：
background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;
<style>background: transparent url(image.jpg) repeat-y fixed top ;</style>這是實際開發中，我們更提倡的寫法。
背景色半透明CSS3 為我們提供了背景顏色半透明的效果。
background: rgba(0, 0, 0, 0.3);•最後一個參數是 alpha 透明度，取值範圍在 0~1之間•我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);•注意：背景半透明是指盒子背景半透明，盒子裡面的內容不受影響•CSS3 新增屬性，是 IE9+ 版本瀏覽器才支持的•但是現在實際開發,我們不太關注兼容性寫法了,可以放心使用
CSS 背景屬性（Background）總結與擴展屬性描述background在一個聲明中設置所有的背景屬性。background-attachment設置背景圖像是否固定或者隨著頁面的其餘部分滾動。background-color設置元素的背景顏色。background-image設置元素的背景圖像。background-position設置背景圖像的開始位置。background-repeat設置是否及如何重複背景圖像。background-clip規定背景的繪製區域。background-origin規定背景圖片的定位區域。background-size規定背景圖片的尺寸。