CSS3背景
CSS3包含了一些新的背景屬性，允許背景元素的控制。
在本章中，您將學習如何多背景圖片添加到一個元素。
您還將了解以下新CSS3屬性：
-
background-size -
background-origin -
background-clip
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-, -moz- ，或-o-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3多背景
CSS3允許您添加多背景圖片為元素，通過background-image屬性。
在不同的背景圖像由逗號分隔，並且圖像被堆疊在彼此的頂部，其中所述第一圖像是最接近觀看者。
下面的例子中有兩個背景圖像，所述第一圖像是花（對齊的底部和右側）和第二圖像是紙的背景（對齊左上角）：
例
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} 試一試» 多背景圖片就可以利用個別背景屬性（如上）或指定background速記屬性。
下面的示例使用background速記屬性（相同的結果上面的例子）：
例
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} 試一試» CSS3背景大小
CSS3的background-size屬性允許你指定背景圖片的大小。
CSS3之前，背景圖像的大小為圖像的實際大小。 CSS3允許我們重新使用背景圖像在不同的上下文。
尺寸可在長度被指定，百分比，或通過使用兩個關鍵字之一：包含或蓋。
下面的例子中調整大小的背景圖像比原始圖像更小（使用像素）：
原始背景圖片：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
調整大小背景圖片：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
下面是代碼：
例
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
試一試» 對於其他兩個可能的值background-size是contain和cover 。
在contain關鍵字縮放的背景圖像是盡可能大（但其寬度和高度二者必須適合在內容區域內）。 因此，根據背景圖像和背景的定位區域的比例，可以存在未覆蓋背景圖像的背景的一些區域。
該cover關鍵字縮放的背景圖像，使得內容區域由背景圖像完全覆蓋（其寬度和高度都等於或超過內容區域）。 因此，背景圖像的某些部分可能不是在背景的定位區域中可見。
下面的例子說明了如何使用contain和cover ：
例
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
試一試» 定義多背景圖片的尺寸
該background-size多背景的工作時，物業還接受背景大小多個值（用逗號分隔的列表）。
下面的例子有三個背景圖像指定的，具有不同background-size為每個圖像值：
例
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} 試一試» 全尺寸背景圖片
現在，我們希望有一個網站，涵蓋了在任何時候整個瀏覽器窗口上的背景圖像。
的要求如下：
- 填寫與圖像的整個頁面（無空格）
- 根據需要縮放圖像
- 頁面上的圖像中心
- 不會導致滾動條
下面的示例演示如何做到這一點; 使用HTML元素（html元素始終是瀏覽器窗口的至少高度）。 然後設置就可以了固定和居中背景。 然後調整其與大小background-size屬性：
CSS3 background-origin物業
CSS3的background-origin屬性指定背景圖像的位置。
該物業有三個不同的值：
- border-box -背景圖像從邊界的左上角開始
- padding-box - （默認）的背景圖像從填充邊緣的左上角開始
- content-box -背景圖像從內容的左上角開始
下面的例子說明了background-origin屬性：
例
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
試一試» CSS3 background-clip屬性
CSS3的background-clip屬性指定的背景畫區域。
該物業有三個不同的值：
- border-box - （默認）的背景是畫到邊框的外邊緣
- padding-box -背景塗到填充的外週緣
- content-box -背景是內容框畫內
下面的例子說明了background-clip屬性：
例
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
試一試» 自測練習用！
CSS3背景屬性
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性在一個聲明中設置所有的背景屬性 |
| background-clip | 指定背景的繪畫面積 |
| background-image | 指定一個或多個背景圖像元素 |
| background-origin | 指定了背景圖像（S）為/定位 |
| background-size | 指定背景圖像的大小（S） |