CSS3 包含多個新的背景屬性戚绕，它們提供了對背景更強大的控制。
在本章韧掩，您將學到以下背景屬性：
background-size
background-origin
您也將學到如何使用多重背景圖片。
瀏覽器支持
屬性瀏覽器支持
background-size
background-origin
Internet Explorer 9+铅乡、Firefox溉委、Chrome鹃唯、Safari 以及 Opera 支持新的背景屬性。
CSS3 background-size 屬性
background-size 屬性規(guī)定背景圖片的尺寸瓣喊。
在 CSS3 之前坡慌，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中藻三，可以規(guī)定背景圖片的尺寸洪橘，這就允許我們在不同的環(huán)境中重復使用背景圖片。
您能夠以像素或百分比規(guī)定尺寸棵帽。如果以百分比規(guī)定尺寸熄求，那么尺寸相對于父元素的寬度和高度。
例子 1
調整背景圖片的大卸焊拧：
div{background:url(bg_flower.gif);-moz-background-size:63px 100px;/* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}
例子 2
對背景圖片進行拉伸弟晚，使其完成填充內容區(qū)域：
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 屬性規(guī)定背景圖片的定位區(qū)域。
背景圖片可以放置于 content-box仗谆、padding-box 或 border-box 區(qū)域指巡。
實例
在 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規(guī)定背景的繪制區(qū)域隶垮。
background-origin規(guī)定背景圖片的定位區(qū)域藻雪。
background-size規(guī)定背景圖片的尺寸。
