IT兄弟連 HTML5教程 CSS3屬性特效 CSS3背景

 

CSS3規範中對背景這一部分，新加入了一些有用的功能，如能夠設置多個背景圖片、能夠指定背景大小、設置背景漸變等功能。CSS3規範中定義的背景屬性新增了background-clip、background-origin、background-size，這三個屬性描述如表1：

表1  CSS3新增背景屬性

1  多背景

CSS3容許設置多個背景圖片，每一個背景用逗號隔開，每一個背景圖片佔一層，層的上下顯示按照在CSS中寫的順序來定，最早寫的背景在最上層。

多背景的格式以下：

background: url(a.jpg) 0 0，url(b.jpg) 0 100%;

這裏，咱們使用三個圖片爲div製做三層背景，第一種方法是背景的簡寫方式，代碼以下：

 

上述代碼爲div設置了三層背景，每層的背景圖片平鋪方式設爲不重複，第一層背景引用了「bg1.jpg」圖片，位於該div「0 0」的位置；第二層背景引用了「bg2.jpg」圖片位於「200px 0」的位置；第三層背景引用了「bg3.jpg」圖片位於「400px 0」位置。在瀏覽器裏運行的結果如圖1所示：

圖1  三層背景重疊

 

除了這種簡寫方法外，咱們還能夠將background屬性拆分開來，使用background-image、background-repeat和background-position分別來設置背景圖片的地址，平鋪方式和位置，CSS代碼以下：

 

這段代碼就是對上面代碼的一個改寫，在瀏覽器裏的執行效果同樣。值得注意的是，背景漸變也是一種背景層。下面咱們爲div設置三層背景，第一層背景爲背景漸變，第二層背景爲背景圖。CSS代碼以下：

 

第一層爲從左到右的「rgba(255,255,0,1)」到「rgba(255,0,0,0)」的漸變背景，第二層爲「itxdl.jpg」的背景圖。在瀏覽器裏運行的結果如圖2：

圖2  背景漸變層

 

2  背景尺寸

CSS3還新增了背景尺寸background-size屬性，該屬性能夠設置具體的值，百分比等。該屬性的取值及描述如表2：

表2  背景尺寸屬性取值及描述

 

 

 

當咱們爲background-size設置一個值時，那麼第二個值會被設置爲「auto」。若對背景圖片設置兩個值時未與背景圖自己大小成比例，容易是圖片失真或變形。

下面有一個高度和寬度爲200px的div，而咱們想要將一張寬高爲600px的圖片做爲背景圖。咱們想要將該圖片填充到這個div的話，若沒有background-size的屬性，咱們就須要使用一些軟件將這張圖片壓縮再爲設置背景，不然背景圖片會溢出。未使用background-size時，CSS代碼以下：

 

在瀏覽器裏運行的結果如圖3：

圖3  背景圖片未使用background-size

 

在這裏咱們只能看到「itxdl2.jpg」的左上角的三分之一。在爲該背景圖片的background-size設置爲「200px 200px」、「200px auto」、「auto 200px」、「cover」和「contain」均可以達到全填充的目的。例如，咱們在這裏使用「200px auto」，增長「background-size: 200px auto」，CSS代碼以下：

 

在瀏覽器裏運行的結果如圖4：

 

圖4  背景圖片全填充

 

只有當background-size值爲auto時，背景圖片纔不會變形失真，而其餘值都會形成背景圖片變形夫真，因此你們使用時須要仔細考慮好，以避免給你的製做帶來不良效果。

 

3  background-origin

CSS3可使用background-orgin屬性設置圖像的基準位置。該屬性的取值及描述如表3：

表3  background-origin屬性取值及描述

 

 

 

該屬性默認取值爲「padding-box」，顧名思義，從圖像的填充框開始繪製。指定了背景從哪一個區域(邊框、補白或內容)開始繪製，但也僅僅能控制背景開始繪製的位置，你能夠用這個屬性在邊框上繪製背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了。background-clip在下面的內容會提到。

這裏，咱們將div的邊框設爲半透明，體現出邊框，又體現出邊框中的背景。將其的背景圖的background-origin設置爲border-box，將其邊框設爲半透明。這時圖像從邊框界開始填充，代碼以下：

 

該div的背景圖從邊框開始繪製，在瀏覽器裏運行的結果如圖5：

圖5  背景圖片基準位置

 

4  background-clip

CSS3可使用background-orgin屬性規定背景的繪製區域。background-clip控制的不單單是背景圖片，而是控制整個元素背景的顯示範圍。該屬性的取值及描述如表4：

表4  background-origin屬性取值及描述

該屬性的默認取值爲「border-box」。指定了背景在哪些區域能夠顯示，但與背景開始繪製的位置無關，背景的繪製的位置能夠出如今不顯示背景的區域，這時就至關於背景圖片被不顯示背景的區域裁剪了一部分同樣。

這裏，我爲div設置「padding: 10px」。將其背景圖的background-clip設置爲content-box。這時圖像背景從邊框界開始填充，CSS代碼以下：

 

在瀏覽器裏運行的結果如圖6所示：

圖6  背景圖片規定繪製區域