[轉載]CSS背景:css background屬性全解析

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

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

背景顏色

background-color屬性為元素設定背景色，這個屬性接受任何合法的顏色值。
預設值是 transparent（透明）。如果一個元素沒有指定背景色，那麼背景就是透明的。

div {background-color:red;} //它的值可以是顏色名稱
div {background-color:#ff0000;} //也可以是顏色代碼，#ff0000可簡寫成#f00

背景圖片

background-image屬性通過一個URL值為元素設定背景圖片。
預設值是 none，表示背景上沒有放置任何映像。

body {background-image: url(/54173blog/04.gif);} //通常我們會為body指定背景圖片
p {background-image: url(/54173cn/04.gif);} //所有元素都可以設定background-image屬性
a.hot {background-image: url(/54173cn/04.gif);} //甚至是內嵌元素（行內元素）

背景重複（平鋪）

background-repeat屬性設定背景圖片是否重複以及如何重複，它的值包括repeat、repeat-x(水平重複)、repeat-y(垂直重複)和no-repeat(不重複)。
預設值是 repeat，表示背景圖片從元素的左上方開始，在水平和垂直方向均重複顯示。

body
{
background-image: url(/54173blog/03.gif); //background-repeat定義背景圖片是否重複，所以先設定背景圖片。
background-repeat: repeat-x; //repeat-x，在水平方向重複。
}


背景關聯

background-attachment屬性設定背景圖片是否隨網頁內容滾動而移動。它的值fixed(不移動)、scroll(隨內容滾動而移動)。
預設值是 scroll，在預設的情況下，背景會隨文檔滾動。

body
{
background-image: url(body_bg.gif); //通常我們用這個屬性用來固定網頁的背景圖片
background-attachment: fixed; //fixed，頁面背景圖不移動。
}


背景定位

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 {background:#f00 url(/54173blog/bg.gif) no-repeat fixed center;} //有多項屬性要定義時，注意書寫順序。
div {background:url(/54173blog/bg.gif) center;} //可以只定義某幾項屬性
div {background:url(/54173blog/bg.gif);} //甚至是一項

 

文章轉載自：http://www.54173.cn/blog/?p=292