CSS3背景

注意：由于CSS3中的部分內(nèi)容尚未完全定稿，所以本文的部分可能會隨時(shí)更新。

Background是CSS Level1就開始支持的屬性，用于設(shè)置元素背景相關(guān)內(nèi)容。Background是一個(gè)復(fù)合屬性，它包含如下幾個(gè)子屬性，

• background-color，規(guī)定要使用的背景顏色
• background-position，規(guī)定背景圖像的位置
• background-size，規(guī)定背景圖片的尺寸
• background-repeat，規(guī)定如何重復(fù)背景圖像
• background-clip，規(guī)定背景的繪制區(qū)域
• background-origin，規(guī)定背景圖片的定位區(qū)域
• background-attachment，規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動
• background-image，規(guī)定要使用的背景圖像

其中background-size，background-clip，background-origin，這幾個(gè)屬性是CSS3 Level3中關(guān)于background新增的屬性。本篇文章將會簡單闡述CSS Level1～CSS Level2中的屬性，稍微詳細(xì)點(diǎn)描述CSS Level3新增的幾個(gè)屬性。

已有屬性

background-color

其語法如下，

background-color: <color> | transparent

background-color用于設(shè)置元素的背景顏色，其值可以是一個(gè)顏色值（可以為多種顏色的表達(dá)，比如RGB、十六進(jìn)制、特定值’red’等）或者為transparent。默認(rèn)值為transparent，意為透明，即啥顏色也不設(shè)置。

background-position

其語法如下，

background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]

background-position用于設(shè)置背景圖片的位置參數(shù)。它有多種賦值模式，可以形如(0,0)、(0%,0%)，或者是使用’left’，’top’，’center’，’right’，’bottom’等字段進(jìn)行設(shè)置。

在設(shè)置background-position屬性時(shí)，腦子里需要有這樣一個(gè)概念。以左上角(0,0)的位置為坐標(biāo)系的原點(diǎn)，向右延伸為X軸，向下延伸為Y軸。所以形如(0,0)、(0%,0%)的賦值其實(shí)是表明了背景圖像距離坐標(biāo)系原點(diǎn)的距離。而’left’意為(0%, Y)，’right’意為(100%, Y)，’center’意為(50%, Y)，’top’和’bottom’的含義與其相似。

background-repeat

其語法如下，

background-repeat: repeat || repeat-x || repeat-y || no-repeat

background-repeat用于設(shè)置background-image（背景圖片）在元素中的鋪放風(fēng)格的，其默認(rèn)值為repeat，意為圖片沿著右方（X軸方向）和下方（Y軸）同時(shí)平鋪。

所以，repeat-x意為只沿著X軸方向平鋪，repeat-y意為只沿著Y軸方向平鋪，no-repeat意為不作任何平鋪。

background-attachment

其語法如下，

background-attachment: scroll || fixed

background-attachment用于設(shè)置背景圖像是否固定活著隨著頁面的滾動而滾動。其默認(rèn)值scroll，表示背景圖片會隨著頁面滾動而滾動；取值為fixed時(shí)，背景圖片固定不動。

background-image

其語法如下，

background-image: none || <url>

background-image用于設(shè)置元素的背景圖片，其默認(rèn)值為none，<url>為背景圖片的地址，可用絕對地址亦可用相對地址。

新增屬性

background-size

其語法如下，

background-size: auto || <length> || <percentage> || cover || contain

background-size屬性用于設(shè)置背景的大小。其中，auto就是使用圖片的原生寬高，<length>和<percentage>就是設(shè)置一個(gè)具體的值。這三個(gè)屬性沒什么還說的。下面說下cover和contain這兩個(gè)賦值的含義。

1. cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
2. contain：把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

需要注意的是，這兩種取值都會導(dǎo)致圖片失真。這里有一個(gè)示例可以體驗(yàn)兩者的不同。

額外補(bǔ)充一點(diǎn)，當(dāng)使用<length>或者<percentage>進(jìn)行賦值時(shí)，我們可以只賦一個(gè)值，比如background-size: 100px，此時(shí)相當(dāng)于background-size: 100px 100px。

兼容性：IE9+、Firefox 4+、Opera、Chrome以及Safari 5+支持background-size屬性，所以在實(shí)際使用background-size屬性時(shí)針對不同瀏覽器需要帶上其前綴。

background-clip

其語法如下，

background-clip ： border-box || padding-box || content-box

background-clip屬性用于設(shè)置背景的裁剪區(qū)域，即控制元素的背景實(shí)際顯示區(qū)域的大小。

1. border-box，此為默認(rèn)值，元素背景區(qū)域包含border區(qū)域及其之內(nèi)的padding和content區(qū)域。
2. padding-box，元素背景區(qū)域包含padding及其之內(nèi)的content區(qū)域。
3. content-box，元素背景區(qū)域僅包含content區(qū)域。

各個(gè)取值的不同效果展示，可參閱這個(gè)示例。

這里所說的border、padding、content等區(qū)域其實(shí)是CSS盒模型的組成部分，更多內(nèi)容可參閱CSS盒模型科普。

兼容性：IE9+、Firefox、Opera、Chrome以及Safari支持background-clip屬性，所以在實(shí)際使用background-clip屬性時(shí)針對不同瀏覽器需要帶上其前綴。

background-origin

其語法如下，

background-origin: padding-box || border-box || content-box

background-origin屬性用于設(shè)置背景的background-position屬性相對什么來定位。

1. padding-box，此為默認(rèn)值，相對于內(nèi)邊距（padding的外邊沿）來定位。
2. border-box，相對于邊框（border的外邊沿）來定位。
3. content-box，相對于內(nèi)容（content的外邊沿）來定位。

各個(gè)取值的不同效果展示，可參閱示例。

兼容性：IE9+、Firefox 4+、Opera、Chrome以及Safari 5+支持background-origin屬性，所以在實(shí)際使用background-origin屬性時(shí)針對不同瀏覽器需要帶上其前綴。

CSS3 Multiple Background

CSS3的background屬性允許設(shè)置多個(gè)除了background-color之外的屬性。比如，

background-image: url1,url2,...,urlN;
background-repeat: repeat1,repeat2,...,repeatN;
background-position: position1,position2,...,positionN;
background-size: size1,size2,...,sizeN;
backrgound-attachment: attachment1,attachment2,...,attachmentN;
background-clip: clip1,clip2,...,clipN;
background-origin: origin1,origin2,...,originN;

所以利于這一點(diǎn)我們可以僅在一個(gè)元素上同時(shí)設(shè)置多個(gè)背景來達(dá)到以往需要多個(gè)元素配合才能達(dá)到的效果。

參考列表

• http://www.w3.org/TR/css3-background/
• CSS3 Background-size
• CSS3 Background-clip
• CSS Background-origin
• CSS3 Multiple Backgrounds