CSS background屬性之主要背景屬性

在CSS中，關於background屬性，主要有5個相關的背景屬性。如下所示：

• background-color屬性：設定背景顏色。
• background-image屬性：設定背景圖片。
• background-repeat屬性：是否重複背景圖片。
• background-attachment屬性：設定背景圖片是否隨頁面滾動。
• background-position屬性：指定背景圖片的位置。

這5個背景屬性可以使用background屬性代替。

背景佔據了元素的全部內容區域，這個區域包含了元素的padding和border，但不包含margin。

background屬性在Firefox、Safari、Opera和IE8中能夠正常顯示，但是在IE6和IE7中不包含border。background屬性在瀏覽器中的顯示情況，如下圖所示：

在上圖中，我們看到，IE6和IE7的內容區域沒有包含橙色的邊框線（border）。

背景顏色——background-color屬性

background-color屬性使用純色填充背景。設定背景顏色的方法有許多種，下面這3種方法顯示的顏色是一樣的：

background-color: #FF0000;
background-color: red;
background-color: rgb(255,0,0);

該屬性還可以被設定為透明（transparent），從而使它下面的元素可以顯示出來。

背景圖片——background-image屬性

background-image屬性允許在背景中新增一張圖片。該屬性可以和background-color屬性同時使用，因此，圖片沒有覆蓋的地方都會顯示出背景顏色。設定背景圖片的方法如下：

background-image:url(image.jpg);

圖片的路徑是相對於樣式表來說的。因此，在上面的程式碼中，表示圖片和樣式表位於同一個目錄中。

再來觀察一下下面的程式碼：

background-image:url(images/image.jpg);

表示圖片在樣式表所在的目錄的一個名為images的子目錄中。也就是說，images資料夾位於樣式表所在的資料夾中。

另外，使用../表示上一級目錄，比如

background-image:url(../images/image.jpg);

表示圖片位於樣式表的上級目錄中的images子目錄中。

背景平鋪——background-repeat屬性

設定背景圖片時，圖片在預設情況下會在水平和垂直方向上鋪滿整個元素。不過，我們也可以使圖片只出現一次，或者只在一個方向上平鋪。如下所示：

background-repeat: repeat;    /* 預設值，同時在水平和垂直方向上平鋪 */
background-repeat: no-repeat; /* 圖片只顯示一次 */
background-repeat: repeat-x;  /* 圖片沿水平方向（x軸）平鋪 */
background-repeat: repeat-y;  /* 圖片沿垂直方向（y軸）平鋪 */
background-repeat: inherit;   /* 圖片繼承父元素的background-repeat屬性 */

背景定位——background-position屬性

background-position屬性用於控制背景圖片在元素中的位置。這個位置指定的是圖片左上角相對於元素左上角的位置。

在下面的例子中，使用background-position屬性來控制背景圖片的位置，同時設定background-repeat為no-repeat；單位是畫素；第一個數字表示水平（x軸）位置，第二個數字表示是垂直（y軸）位置：

/* 例1：預設值 */
background-position: 0 0; /* 圖片左上角對齊元素的左上角 */

/* 例2：把圖片向右邊移動75畫素 */
background-position:75px 0;

/* 例3：把圖片向左移動75畫素 */
background-position:-75px 0;

/* 例4：把圖片向下移動100畫素 */
background-position: 0 100px;

如下圖所示：

background-position屬性還可以使用其它的長度單位、關鍵字或百分比來進行定位。

關鍵字在x軸上表示為left、center、right；在y軸上表示為top、center、bottom。

關鍵字的使用方法和畫素值的使用方法一樣，首先是x軸，然後是y軸。如下所示：

background-position: top right;

使用百分比也是類似的方法。

注意，使用百分比時，瀏覽器是以元素的百分比來設定圖片的位置的。如下所示：

background-position: 100% 50%;

使用百分比定位時，是將背景圖片的百分比指定的位置和元素的百分比位置對齊。就是說，使用百分比定位改變了背景圖片和元素的對齊基點，不再像使用畫素和關鍵字定位時，使用背景圖片和元素的左上角為對齊基點。

上面的例子程式碼，就是將背景圖片的100%(right) 50%(center)這個點，和元素的100%(right) 50%(center)這個點進行對齊的。如下圖所示：

背景圖片是否滾動——background-attachment屬性

background-attachment屬性設定頁面滾動時圖片所處的狀態。該屬性的3個屬性值為scroll（滾動）、fixed（固定）和inherit（繼承）。inherit表示該元素繼承它的父元素的background-attachment屬性值。程式碼如下：

background-image:url(image.jpg);
background-position:0 0;
background-repeat:no-repeat;
background-attachment:scroll; /* 預設值，背景圖片會隨著頁面的滾動而滾動 */

如下圖所示：

當頁面向下滾動時，背景圖片會向上移動，直到消失。

當background-attachment屬性設定為fixed時，將頁面向下滾動，而背景圖片會待在它原來的位置上，不會隨著元素進行滾動。程式碼如下：

background-image:url(image.jpg);
background-position:0 100%;
background-repeat:no-repeat;
background-attachment:fixed; /* 背景圖片不會隨著頁面的滾動而滾動 */

如下圖所示：

頁面在向下滾動的同時，影象仍然保持可見！

背景圖片只能出現在它的父元素所能達到的區域。即使圖片是相對於瀏覽器視窗進行定位的，但是，如果它的父元素不可見，圖片就會消失。如下所示：

background-image:url(image.jpg);
background-position:0 100%;
background-repeat:no-repeat;
background-attachment:fixed; /* 背景圖片只能出現在它的父元素所能達到的區域 */

上面的程式碼中，雖然背景圖片位於瀏覽器視窗的左下方，但是隻有元素內的圖片部分是可見的。

如下圖所示：

因為背景圖片是從元素外面開始的，所以元素外面的圖片部分被切除了。

背景的簡寫屬性——background屬性

我們可以把背景的各個屬性合併在一起使用，而不需要每次都把他們單獨寫出來。格式如下：

background:<color> <image> <position> <attachment> <repeat>

比如，下面的程式碼樣式：

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

可以合併為一行：

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

在上面的程式碼中，並不需要給出每一個值，如果某一個值沒有指定，就會使用屬性的預設值。比如，上面的程式碼和下面的程式碼效果是一樣的：

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

背景的一般性用法

除了給元素使用背景以外，背景還有以下的用法：

1. 仿欄

當使用float屬性定位佈局元素時，要確保兩欄或多欄具有相同的長度是比較困難的。如果長度不同，則其中一欄的背景就會比另外欄的背景短，這樣就破壞了整個佈局的設計。

此時，不需要給每一列單獨設定背景，而是給各列的父元素設定一個背景，這樣，所有欄的設計就都包含在這張圖片中了。

2. 文字替換

在網頁上，有時候對於字型的選擇是相當有限的。不過，有一個適用於所有瀏覽器的最簡單的方法：

將要用的文字內容和要使用的字型做成一張文字圖片，再把這張圖片作為背景，然後再在網頁中輸入文字內容。這樣，文字依然會出現在文件標籤中，以供搜尋引擎檢索，但是，在瀏覽器中就會顯示出首選的字型。方法如下：

<p class="one">這是一段文字內容！</p>

再做一張同樣大小的圖片，圖片上面顯示了自己想要的字型，此時，就可以用下面的方法來替換文字了：

h3.one{
width:200px;
height:75px;
background:url(text.jpg) 0 0 no-repeat;
text-indent: -9999px; /* text-indent屬性：向左邊移動文字內容的位置，以便隱藏起來。*/
}

3. 簡單的圓點

無序列表中的圓點標記確實難看！我們可以將它隱藏起來，然後再使用背景圖片來代替。程式碼如下：

ul{
list-style:none; /* 隱藏列表中的圓點標記 */
}
ul li{
padding-left:30px; /* padding-left屬性：設定背景圖片左邊的距離 */
background:url(image.jpg) 0 0 no-repeat; /* 設定背景圖片 */
}

因為我們能夠靈活製作背景圖片，所以根據上面的方法就可以製作出漂亮的無序列表標記來！