本文對CSS3中背景的四個(gè)新的屬性進(jìn)行了詳細(xì)介紹。

多重背景圖片

Css3中，對一個(gè)元素可以使用一張以上的背景圖片。除了使用逗號將圖片分開以外，其代碼與css2相同。第一個(gè)聲明的圖片定位在元素的頂部，接下來的圖片層列于下，像這樣：

1.background-image:?url(top-image.jpg),url(middle-image.jpg),?url(bottom-image.jpg);

Background Clip

該屬確定背景畫區(qū)，有以下幾種可能的屬性：

• background-clip: border-box;背景從border開始顯示;
• lbackground-clip: padding-box;背景從padding開始顯示;
• background-clip: content-box;背景顯從content取與開始顯示;
• background-clip: no-clip;默認(rèn)屬性，等同于border-box;

Background Origin

它通常與background-position聯(lián)合使用，你可以從border、padding、content來計(jì)算background-position（就像background-clip）。

• background-origin: border-box;從border.開始計(jì)算background-position;
• background-origin: padding-box;從padding.開始計(jì)算background-position;
• background-origin: content-box;從content.開始計(jì)算background-position;

Background Size

background-size常用來調(diào)整背景圖片的大小，有以下可能的屬性：

• background-size: contain;縮小圖片以適合元素（維持像素長寬比）;
• background-size: cover;擴(kuò)展元素以填補(bǔ)元素（維持像素長寬比）
• background-size: 100px 100px;縮小圖片至指定的大小.
• background-size: 50% 100%;縮小圖片至指定的大小，百分比是相對包含元素的尺寸.

Background Break

Css3中，元素可以被分割成單個(gè)的盒子（例如，使一個(gè)內(nèi)聯(lián)的span元素多行排列），background-break 屬性控制背景跨越多個(gè)盒子如何顯示。

• Background-break: continuous；;默認(rèn)值。盒子之間好像沒有空白（好似它們在一個(gè)盒子當(dāng)中，背景圖片應(yīng)用到盒子之上）。
• Background-break: bounding-box；將空白考慮進(jìn)去。
• Background-break: each-box；將每個(gè)盒子單獨(dú)處理，對每一個(gè)重繪背景。

改變background-color

Css3對背景顏色有輕微的加強(qiáng)，除了定義背景顏色之外，你還可以定義一個(gè)備用顏色，它在元素最底層的圖片不能使用時(shí)得以生效。如：

1.background-color:?green?/?blue;

在這個(gè)例子中，背景顏色為green。但是，如果最底層的圖片不能使用，背景顏色將是blue。如果沒有定義顏色，就假定是透明的(transparent)。

改變Background Repeat

在css2中，當(dāng)圖片重復(fù)時(shí)，它經(jīng)常在元素的底部切斷。Css3引入兩個(gè)新的屬性修復(fù)它。

• space:等量的空白應(yīng)用到圖像塊之間直到填滿元素。
• round:圖片縮小直到適合元素。

改變Background Attachment

background-attachment 有一個(gè)可能的屬性值：local。它通常與能滾動的元素（如：overflow:scroll）一起發(fā)揮作用。當(dāng)background-attachment 為scroll時(shí)，元素內(nèi)容滾動時(shí)背景圖片不會滾動。background-attachment為local時(shí)，元素內(nèi)容滾動時(shí)背景圖片會跟著滾動。

總結(jié)

以上是生活随笔為你收集整理的CSS3中背景的四个新的属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。