CSS3規(guī)范中對背景這一部分，新加入了一些令人興奮的功能，如可以設置多個背景圖片、可以指定背景大小、設置背景漸變等功能。CSS3規(guī)范中定義的背景屬性有：
| 屬性名 | 可能的值 | 默認值 |
| background | 是一種簡寫方式：bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin，最后一個背景層可以設置background-color | |
| background-attachment | scroll | fixed | local | scroll |
| background-clip | border-box | padding-box 表示背景渲染的方法：padding box表示背景在padding box內渲染；border-box表示背景在border-box內渲染 | border-box |
| background-color | <color> | transparent |
| background-image | image | none 可以設置多個背景圖，以逗號（,）分隔開。none也代表一個背景層 | none |
| background-origin | border-box | padding-box | content-box 背景相對的位置，相對于上面3個值中的一個。 | padding-box |
| background-position | % length top right bottom left center 這些屬性的設置方法跟以前類似 | 0% 0% |
| background-repeat | repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} 平鋪方式 | repeat |
| background-size | [length | % | auto ]{1,2} | cover | contain 設置背景的大小。contain表示按比例縮放占據最大高度或者寬度的背景；cover表示鋪滿整個背景。 | auto |
下面我們以5個例子來說明一些新的CSS3的功能。其中，CSS3允許設置多個背景圖片，每個背景圖片占一層，層的上下按照在CSS中寫的順序來定，最先寫的背景在最上層。
background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;是背景的簡寫方式，除了默認值之外，等效于下面的寫法：
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");background-repeat: no-repeat, no-repeat, no-repeat; background-position: 0 0, 200px 0, 400px 201px; 另外一個需要注意的是：背景漸漸也是一個背景層，所以在例子4中
background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)), url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg);
的寫法順序不能顛倒，如果寫成
background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"), -moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0));就看不出漸變效果了。
例子的全部源代碼如下：
< style type ="text/css" > div{font-size:24px;font-weight:bo;d;color:#f00;text-align:right;margin:10px 0;}#div1{height:400px;width:600px;border:4px solid orange;background-image:url("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"),url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg");background-repeat: no-repeat, no-repeat, no-repeat; background-position: 0 0, 200px 0, 400px 201px; }#div2{height:400px;width:600px;border:4px solid orange;background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat, url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat, url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;}#div3{height:100px;width:600px;border:4px solid orange;background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);}#div4{height:100px;width:600px;border:4px solid orange;background-image:-moz-linear-gradient(left, rgba(0, 255, 0, 1), rgba(255, 0, 0, 0)), url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");}#div5{height:400px;width:600px;border:4px solid orange;background-image:url("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg");-moz-background-size:cover;background-repeat:no-repeat;}</ style > < div id ="div1" > div1 </ div > < div id ="div2" > div2 </ div > < div id ="div3" > div3 </ div > < div id ="div4" > div4 </ div > < div id ="div5" > div5 </ div >新聞熱點
疑難解答
