css background屬性詳細解析

css可以控制html中各元素的背景顯示，包括背景顏色、背景、背景重複、背景定位和背景關聯5項。在css中，可以通過background屬性對這5項統一控制，也可通過這5項對應的屬性分別控制。下面我們先了解一下css中的這5個屬性。

css可以為所有元素設定背景色，從body 一直到em 和a 等內聯元素。所有背景屬性都不能繼承。

背景顏色

background-color屬性為元素設定背景色，這個屬性接受任何合法的顏色值。

預設值是 transparent（透明）。如果乙個元素沒有指定背景色，那麼背景就是透明的。

div //它的值可以是顏色名稱

div //也可以是顏色**，#ff0000可簡寫成#f00

背景background-image屬性通過乙個url值為元素設定背景。

預設值是 none，表示背景上沒有放置任何影象。

body //通常我們會為body指定背景

p //所有元素都可以設定background-image屬性

a.hot //甚至是內聯元素（行內元素）

背景重複（平鋪）

background-repeat屬性設定背景是否重複以及如何重複，它的值包括repeat、repeat-x(水平重複)、repeat-y(垂直重複)和no-repeat(不重複)。

預設值是 repeat，表示背景從元素的左上角開始，在水平和垂直方向均重複顯示。

body

背景關聯

background-attachment屬性設定背景是否隨網頁內容滾動而移動。它的值fixed(不移動)、scroll(隨內容滾動而移動)。

預設值是 scroll，在預設的情況下，背景會隨文件滾動。

body

背景定位

background-position屬性定義在背景中的位置。通過精確控制背景位置來達到我們想要的顯示效果。

它的值可以是關鍵字：top、bottom、left、right和center，也可以是精確的數值如5cm、-10px，或者是百分數如50%。

預設值是 top left（關鍵字）、0px 0px（數值）、0% 0%（百分數），即預設背景左上角與元素左上角對齊。

關鍵字：位置關鍵字可以按任何順序出現，最多不能超過兩個（乙個對應水平方向，另乙個物件垂直方向）。如果只出現乙個關鍵字，則認為另乙個關鍵字是center。如background-position:top right;，背景頂部與元素頂部對齊、背景右邊與元素右邊對齊，即它們的右上角重合。

數值：背景左上角相對於元素左上角的偏移。如background-position:10px 10px;，即元素的左上角向右10畫素、向下10畫素的位置為背景的左上角。（可簡單記為：取正數值即背景左上角在元素範圍內，取負數值即背景左上角在元素範圍外。）

百分數：百分數值同時作用於元素和背景，如background-pisition:40% 20%;，則以左上角為起點，背景的水平40%、垂直20%位置與元素的水平40%、垂直20%位置對齊。如果只指定乙個百分數值，所提供的這個值將用作水平方向，垂直方向將假設為50%。

有初學者可能對背景位置的計算感到頭疼，其實百分數這種方法平常很少用到。而對於數值只需要記住它表示的是兩個左上角的距離，從左到右、從上到下取正數，反之取負數。（即正數表示背景左上角在元素左上角的右或下方，負數表示背景左上角在元素左上角的左或上方。）

另外兩個方向的書寫順序也容易記錯，我是這樣記的：「先水平、後垂直」。雖然關鍵字方法對兩個方向的關鍵字順序沒有要求，但是建議統一「先水平、後垂直」，把它當成唯一正確的格式就無論如何也不會寫錯了。在網頁製作中，數值的單位我們一般用px(畫素)。

在上面的5個css屬性中，除了背景關聯不常用到外，其餘4個都是經常會用到、必須掌握的基礎屬性。尤其是background-position使用率很高也很重要，比如css sprites的原理就是為不同元素精確設定背景位置。

background屬性簡寫

在css中，我們還可以簡寫屬性來將所有背景屬性設定在乙個宣告之中。通過設定background屬性我們可以直接定義元素的以上5項屬性，而無需分別定義。在定義有多個屬性值的background屬性時，要注意書寫順序：顏色、、重複、關聯、定位。

div //有多項屬性要定義時，注意書寫順序。

div //可以只定義某幾項屬性

div //甚至是一項

css background背景圖位置計算、background書寫順序