在 CSS 屬性中，通常 color 特指前景的顏色，而 background 可以是背景顏色或者是背景圖案。在定義背景圖案時，我們可以指定該圖片的確切位置、是否重復顯示，以及它是否被固定或隨頁面上的內容滾動。
color
屬性值：<color>
初始值：由 UA 默認值制定
適用於：所有元素
繼承：是
百分比值：不適用
該屬性描述了一個元素中文本的顏色，也叫做前景色。如果要把文本設為紅色，下面是兩種方法。EM{color:red}/*使用普通的關鍵字來定義，這些關鍵字可以被我們讀懂*/EM{color:rgb(255,0,0)}/*使用 RGB 值來定義，每個 RGB 值從0到255*/
background-color
屬性值：<color> | transparent
初始值：transparent
適用於：所有元素
繼承：是
百分比值：不適用
“background-color”設置了元素的背景色。
background-image
屬性值：<url> | none
初始值：none
適用於：所有元素
繼承：否
百分比值：不適用
這個元素設定了一個元素的背景圖案。需要注意的是在設置背景圖案時，對於背景色必須一同設置。因為有時這些圖案會因為某些原因不可用，此時可以用背景色代替，而且背景色的顏色要與背景圖案顏色相似。
background-repeat
屬性值：repeat | repeat-x | repeat-y | no-repeat
初始值：repeat
適用於：所有元素
繼承：否
百分比值：不適用
在背景圖案設置的情況下，設置“background-repeat”可以決定圖案是否重復顯示或者以怎樣的方式重復。
如果屬性值是“repeat”，那就意味著圖片在水平和垂直方向上都重復排列。
如果屬性值是“repeat-x”，表示水平重復排列。
如果屬性值是“repeat-y”，表示垂直重復排列。
如果屬性值是“no-repeat”，表示不重復。
background-attachment
屬性值：scroll | fixed
初始值：scroll
適用於：所有元素
繼承：否
百分比值：不適用
在背景圖案已經設置的情況下，通常這些圖案有兩種依附方式：
1.一種是背景圖案永遠靜止，文字在背景上面“滾動”；
2.另一種是背景圖案隨著頁面上的文字一起“滾動”。
background-position
屬性值：[<percentage> | <length>] {1,2} | [top | center | bottom] || [left | center | right]
初始值：0% 0%
適用於：塊級和可替換元素
繼承：否
百分比值：參照元素本身的尺寸
在背景圖案已經設定的情況下，background-position指定了它的初始位置。如果設定的屬性值是“0% 0%”，那麼意味著圖片左上角與該元素的左上角重合，如果設定的屬性值是“100% 100%”，那麼意味著圖片右下角與該元素的右下角重合，以此類推。在設定背景圖片位置的時候，還可以使用關鍵字來定義一些特殊的位置，下面是一些關鍵字以及相應的尺寸：
“top left”和“left top”＝“0% 0%”；
“top”、“top center”和“center top”＝“50% 0%”；等等。