CSS 可以新增背景顏色和背景圖片，以及來進行圖片設定。

background-color	背景顏色
background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置
background-attachment	背景固定還是滾動
背景的合寫（複合屬性）
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

背景圖片(image)

語法：

background-image : none | url (url) 

引數：

none : 　無背景圖（預設的） url : 　使用絕對或相對地址指定背景影象

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

引數：

repeat : 　背景影象在縱向和橫向上平鋪（預設的）

no-repeat : 　背景影象不平鋪

repeat-x : 　背景影象在橫向上平鋪

repeat-y : 　背景影象在縱向平鋪

背景位置(position)

語法：

background-position : length || length
​
background-position : position || position 

引數：

length : 　百分數 | 由浮點數字和單位識別符號組成的長度值。請參閱長度單位 position : 　top | center | bottom | left | center | right

說明：

設定或檢索物件的背景影象位置。必須先指定background-image屬性。預設值為：(0% 0%)。 如果只指定了一個值，該值將用於橫座標。縱座標將預設為50%。第二個值將用於縱座標。

注意：

1. position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。

2. 如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。

實際工作用的最多的，就是背景圖片居中對齊了。

body{ background-image:url(images/bg.jpg); background-repeat:no-repeat; /*只給定一個，另一個預設居中*/ background-position:top; }

背景附著

語法：

background-attachment : scroll | fixed 

引數：

scroll : 　背景影象是隨物件內容滾動 fixed : 　背景影象固定

說明：

設定或檢索背景影象是隨物件內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方並沒有強制標準的。為了可讀性，建議大家如下寫：

background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

<style> body{ /*background-image:url(images/bg.jpg);*/ /*background-repeat:no-repeat;*/ /*background-position:centertop;*/ color:#ffffff; font-size:20px; /*設定背景圖固定*/ /*background-attachment:fixed;*/ /*設定背景圖滾動*/ /*background-attachment:scroll;*/
/*複合寫法（簡寫）*/ background:#888888url(images/bg.jpg)no-repeatfixedcentertop; } </style>

背景透明(CSS3)

CSS3支援背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個引數是alpha 透明度 取值範圍 0~1之間

注意： 背景半透明是指盒子背景半透明， 盒子裡面的內容不受影響。

背景縮放(CSS3)

通過background-size設定背景圖片的尺寸，就像我們設定img的尺寸一樣，在移動Web開發中做螢幕適配應用非常廣泛。

其引數設定如下：

a) 可以設定長度單位(px)或百分比（設定百分比時，參照盒子的寬高）

b) 設定為cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢位部分則會被隱藏。我們平時用的cover 最多

c) 設定為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。

background-image: url('images/gyt.jpg');
            background-size: 300px 100px;
            /* background-size: contain; */
            /* background-size: cover; */

多背景(CSS3)

以逗號分隔可以設定多背景，可用於自適應佈局 做法就是 用逗號隔開就好了。

• 一個元素可以設定多重背景影象。

• 每組屬性間使用逗號分隔。

• 如果設定的多重背景圖之間存在著交集（即存在著重疊關係），前面的背景圖會覆蓋在後面的背景圖之上。

• 為了避免背景色將影象蓋住，背景色通常都定義在最後一組上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
      url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
      url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;