目錄

• 1.background-color背景色的詳解
• 2.background-image背景圖的詳解
• 3.background-repeat背景重複的詳解
• 4.background-attachment背景是否滾動的設定
• 5.background-position背景定位的詳解
• 6.背景的複合屬性講解

今天簡單的梳理了一下有關於background的筆記，另外，大家寫頁面，用到圖示、圖片等，可以自己學一下利用PS軟體進行簡單的切圖，另外給大家推薦一款PS特別好用的外掛——藍湖，利用它，可以很方便的摳圖，量尺寸等，有興趣的可以學習瞭解一下，我也只會簡單的切圖。好的，下面進入正題。

1.background-color背景色的詳解

• background-color : 設定或檢索物件的背景顏色，預設值：transparent；
• 同時定義了背景顏色和背景影象時，背景影象覆蓋在背景顏色之上

2.background-image背景圖的詳解

• background-image: 設定或檢索物件的背景影象，預設值：none；
• 如果設定了 ’ background-image ‘，同時也建議設定 ’ background-color ‘ 用於當背景影象不可見時保持與文字顏色有一定的對比度。
• 如果定義了多組背景圖，且背景圖之間有重疊，寫在前面的將會蓋在寫在後面的影象之上。

3.background-repeat背景重複的詳解

• background-repeat: 設定或檢索物件的背景影象如何鋪排填充。必須先指定 ’ background-image ‘ 屬性。預設值：repeat；
• 允許提供2個引數，如果提供全部2個引數，第1個用於橫向，第二個用於縱向；
• repeat-x： 背景影象在橫向上平鋪
• repeat-y： 背景影象在縱向上平鋪
• repeat： 背景影象在橫向和縱向平鋪
• no-repeat： 背景影象不平鋪

4.background-attachment背景是否滾動的設定

• background-attachment: 設定或檢索背景影象是隨物件內容滾動還是固定的。必須先指定 ’ background-image ‘ 屬性。預設值：scroll
• fixed： 背景影象相對於窗體固定。
• scroll： 背景影象相對於元素固定，也就是說當元素內容滾動時背景影象不會跟著滾動，因為背景影象總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。
• percentage： 用百分比指定背景影象填充的位置。可以為負值。
• length： 用長度值指定背景影象填充的位置。可以為負值。
• center： 背景影象橫向和縱向居中。
• left： 背景影象在橫向上填充從左邊開始。
• right： 背景影象在橫向上填充從右邊開始。
• top： 背景影象在縱向上填充從頂部開始。
• bottom： 背景影象在縱向上填充從底部開始

5.background-position背景定位的詳解

• background-position: 設定或檢索物件的背景影象位置。必須先指定 ’ background-image ‘ 屬性。 該屬性提供2個引數值
• 如果提供兩個，第一個用於橫座標，第二個用於縱座標。
• 如果只提供一個，該值將用於橫座標；縱座標將預設為50%（即center）

6.背景的複合屬性講解

background: 背景顏色、背景圖片、背景平鋪方式、背景是否滾動、背景定位。