# CSS3 背景 ## CSS3 背景 CSS3 包含多個新的背景屬性，它們提供了對背景更強大的控制。 在本章，您將學到以下背景屬性： * background-size * background-origin 您也將學到如何使用多重背景圖片。 ## 瀏覽器支持 | 屬性 | 瀏覽器支持 | | --- | --- | | background-size | | background-origin | Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景屬性。 ## CSS3 background-size 屬性 background-size 屬性規定背景圖片的尺寸。 在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重復使用背景圖片。 您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那么尺寸相對于父元素的寬度和高度。 ### 例子 1 調整背景圖片的大小： ``` div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } ``` ### 例子 2 對背景圖片進行拉伸，使其完成填充內容區域： ``` div { background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; } ``` ## CSS3 background-origin 屬性 background-origin 屬性規定背景圖片的定位區域。 背景圖片可以放置于 content-box、padding-box 或 border-box 區域。  ### 實例 在 content-box 中定位背景圖片： ``` div { background:url(bg_flower.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ background-origin:content-box; } ``` ## CSS3 多重背景圖片 CSS3 允許您為元素使用多個背景圖像。 ### 實例 為 body 元素設置兩幅背景圖片： ``` body { background-image:url(bg_flower.gif),url(bg_flower_2.gif); } ``` ## 新的背景屬性 | 屬性 | 描述 | CSS | | --- | --- | --- | | [background-clip](/cssref/pr_background-clip.asp "CSS3 background-clip 屬性") | 規定背景的繪制區域。 | 3 | | [background-origin](/cssref/pr_background-origin.asp "CSS3 background-origin 屬性") | 規定背景圖片的定位區域。 | 3 | | [background-size](/cssref/pr_background-size.asp "CSS3 background-size 屬性") | 規定背景圖片的尺寸。 | 3 |