Design Code 設計密碼

CSS3 包含多個新的背景屬性，它們提供了對背景更強大的控制。

• 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; <span class="code_comment">/*老版本的Firefox */</span>
background-size:63px 100px;
background-repeat:no-repeat;
}
	

例子 2

對背景圖片進行拉伸，使其完成填充內容區域：

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; <span class="code_comment">/*老版本的Firefox */</span>
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; <span class="code_comment">/* Safari */</span>
background-origin:content-box;
}
	

CSS3 多重背景圖片

CSS3 允許您為元素使用多個背景圖像。

實例

為body 元素設置兩幅背景圖片：

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
	

新的背景屬性