CSS背景在網頁設計中使用頻率非常高，然而對於這個開發人員很熟悉的CSS屬性，卻隱藏著許多不為初級開發人員熟知的細節，這篇文章嘗試扒開這層不為人知的面紗。 首先列舉一下CSS中關於元素背景的所有屬性並簡要描述了其作用，其中後面幾個屬性是在CSS3中新加入的。 下麵一一“理清”這些屬性 backgro ...
CSS背景在網頁設計中使用頻率非常高，然而對於這個開發人員很熟悉的CSS屬性，卻隱藏著許多不為初級開發人員熟知的細節，這篇文章嘗試扒開這層不為人知的面紗。
首先列舉一下CSS中關於元素背景的所有屬性並簡要描述了其作用，其中後面幾個屬性是在CSS3中新加入的。
| 屬性 | 描述 | 備註 |
| background | 簡寫屬性，作用是將背景屬性設置在一個聲明中。 | |
| background-color | 設置元素背景顏色 | |
| background-image | 把圖像設置為背景 | |
| background-repeat | 設置背景圖像是否及如何重覆。 | 僅作用與背景圖片，不會影響背景顏色 |
| background-position | 設置背景圖像的起始位置。 | 僅作用與背景圖片，不會影響背景顏色 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其餘部分滾動。 | 僅作用與背景圖片，不會影響背景顏色 |
| background-origin | 規定背景圖片的定位區域。 | CSS3，僅作用與背景圖片，不會影響背景顏色 |
| background-clip | 規定背景的繪製區域。 | CSS3同時作用域背景圖片和背景顏色 |
| background-size | 規定背景圖片的尺寸。 | CSS3 |
下麵一一“理清”這些屬性
background這個複合屬性就不多說了，它可以將其他的屬性值寫在一起
| 1 |
background:[<background-color>] [,background-image] [,background-repeat] [,background-attachment] [,background-position]...
|
1.background-color
background-color可以使用十六進位顏色、RGB顏色、RGBA顏色、HSL色彩、HSLA顏色 、顏色關鍵字等表示的顏色 ，然而很多初級開發者不清楚的是backgroud-color在元素盒模型中覆蓋的範圍是多大。下麵我們測試一下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 400px;
height: 200px;
margin: 20px;
padding: 15px;
border: 10px dotted red;
background-color: green;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
|
為了驗證背景顏色有沒有鋪蓋到邊框，這裡設置了邊框的樣式為點線形式，在現代標準瀏覽器中測試（包括IE8及以上）如下左圖所示，而在IE6環境中測試如下右圖所示。
所以結論是:CSS2元素顏色背景的顯示範圍與CSS2.1、CSS3並不相同。在CSS2中（支持IE6），顏色背景的顯示範圍是指內部留白（包括padding）之內的範圍，不包括邊框；在CSS2.1和CSS3中（包括IE8以上測試），背景在整個盒模型中，它是佈滿整個元素的盒子區域的（但是仍然不包括外邊margin範圍）。
2.background-image:none || <url>
元素的圖片背景是元素的總大小，包括padding和border（但不包括margin）。預設情況下，background-image放置在元素的左上角,並重覆垂直和水平方向(後面會講到background-position預設值為0% 0%,background-repeat預設是repeat),與background-color的預設覆蓋範圍是相同的，在現代標準瀏覽器中鋪滿padding和border，在IE6中卻不包括邊框。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 400px;
height: 200px;
margin: 20px;
padding: 15px;
border: 10px dotted red;
background-color: green;
background-image: url(images.jpg);
}
</style>
|
左圖為現代標準瀏覽器，在IE瀏覽器中測試，可以將其渲染模式設置為IE6.
3.background-repeat:repeat(預設)||repeat-x||repeat-y||no-repeat
background-repeat屬性非常好理解，可以決定圖片背景是否在水平或者垂直方向重覆，其預設值是repeat,即在兩個方向都重覆。然而，很多初級開發者不知道的是，當設置background-repeat為no-repeat時，在現代標準瀏覽器中圖片背景的覆蓋範圍會發生變化，下麵測試一下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 400px;
height: 200px;
margin: 20px;
padding: 15px;
border: 10px dotted red;
background-color: green;
background-image: url(test.jpg);
background-repeat: no-repeat;
}
</style>
|
這裡換上了一個比div要大的圖片，左圖為現代標準瀏覽器的測試結果，右圖為IE6中測試結果。
可以很明顯的發現，左圖中，上邊框和左邊框沒有被圖片背景覆蓋，露出了綠色的背景顏色。而在IE6環境中表現並沒有發生變化。
4.backgroud-positon:%x %y|| xpos ypos||關鍵字
設定背景位置時可以使用三種值：關鍵字、百分比、絕對或相對單位的數值。關鍵字為left、right、與top、bottom、center的組合 ,可以使用兩個值 分別設定水平和垂直位置。 關鍵字指的順序不重要， left bottom 和 bottom left 意思相同。為了設定的值在所有瀏覽器中都有效，最好不要混用關鍵字值與數字值。 使用數值（比如 40% 30%）時，第一個值表示水平位置，第二個值表示垂直位置。要是只設定 一個值，則將其用來設定水平位置，而垂直位置會被設為 center。
需要註意的是：在使用關鍵字和百分比值的情況下，設定的值同時應用於元素和圖片。換句話說，如果設定了33% 33%，則圖片水平 33%的位置與元素水平 33%的位置對齊。垂直方面也一樣。可以通過 center center 把圖片的中心點定位在了元素的中心點。像素之類的絕對單位數值就不一樣了。要是用像素單位來設定位置，那麼圖片的左上角會被放在距離元素左上角指定位置的地方。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 400px;
height: 200px;
margin: 20px;
padding: 15px;
border: 10px dotted red;
background-color: green;
background-image: url(images.jpg);
background-position: 50% 50%;
}
</style>
|
左圖為現代標準瀏覽器，右圖為IE6,可以看到圖片被定位到正中間，併在水平和垂直方向重覆，這也說明瞭使用百分比設置定位時是同時作用在元素和背景圖片上的，如若不然，圖片應該位於黃色方框所在的位置。
接下來我們刨根問底，background-position的預設定位起始點是哪裡？是邊框？還是內留白padding?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 400px;
height: 200px;
margin: 20px;
padding: 15px;
border: 10px dotted red;
background-color: green;
background-image: url(images.jpg);
background-position: 10px 10px;
/*background-repeat: no-repeat;*/
}
</style>
|
從圖中我們找到沿水平和垂直方向重覆前的原始圖片，如圖中黃色方框所示，在css中我們設置的background-position:10px 10px;整個數值正好是邊框的寬度，如果定位起點是邊框外邊緣，則圖片的左上角應該位於邊框左上角外邊緣，而實際顯示卻不是，圖片起點是相對於邊框內邊緣或者說內留白padding的外邊緣定位的，然後水平和垂直重覆鋪滿包括邊框的區域。
如果加上background-repeat: no-repeat效果更容易看出來，下圖是現代標準瀏覽器的測試結果，
有意思的是，還可以使用負值。這樣就可以把圖片的左上角定位到元素外部，從而在元素中只 能看到部分圖片。當然，給background-position設定足夠大的正值，也可以把圖片的右下角推到元素外部，從
而在元素中也只能看到部分圖片,甚至把讓個背景圖片元素外部，位於元素外部的那部分圖片不會顯示這也沒什麼實際意義了。既然background-position可以設置負值，我們考慮第3節出現的問題：當設置background-repeat為no-repeat時，上邊框和左邊框沒有被圖片背景覆蓋。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
div{
width: 400px;
height: 200px;
margin: 20px;
padding: 15px;
border: 10px dotted red;
background-color: green;
background-image: url(test.jpg);
&nbs
|
