本文對CSS3中背景的四個新的屬性進行了詳細介紹。

多重背景圖片

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

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

Background Clip

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

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

Background Origin

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

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

Background Size

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

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

Background Break

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

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

改變background-color

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

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

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

改變Background Repeat

在css2中，當圖片重復時，它經常在元素的底部切斷。Css3引入兩個新的屬性修復它。

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

改變Background Attachment

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。