http://blog.csdn.net/net_lover/article/details/5212026
CSS3规范中对背景这一部分，新加入了一些令人兴奋的功能，如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性有：
| 属性名 | 可能的值 | 默认值 |
|---|---|---|
| 是一种简写方式：bg-image || bg-position || / bg-size || repeat-style || attachment || bg-origin，最后一个背景层可以设置background-color | ||
| scroll | fixed | local | scroll | |
| border-box | padding-box表示背景渲染的方法：padding box表示背景在padding box内渲染；border-box表示背景在border-box内渲染 | border-box | |
| <color> | transparent | |
| image | none可以设置多个背景图，以逗号（,）分隔开。none也代表一个背景层 | none | |
| border-box | padding-box | content-box背景相对的位置，相对于上面3个值中的一个。 | padding-box | |
| % length top right bottom left center这些属性的设置方法跟以前类似 | 0% 0% | |
| repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}平铺方式 | repeat | |
| [length | % | auto ]{1,2} | cover | contain设置背景的大小。contain表示按比例缩放占据最大高度或者宽度的背景；cover表示铺满整个背景。 | auto |
下面我们以5个例子来说明一些新的CSS3的功能。其中，CSS3允许设置多个背景图片，每个背景图片占一层，层的上下按照在CSS中写的顺序来定，最先写的背景在最上层。
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;
是背景的简写方式，除了默认值之外，等效于下面的写法：
CSS 代码
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中
CSS 代码
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");
的写法顺序不能颠倒，如果写成
CSS 代码
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));
就看不出渐变效果了。
例子的全部源代码如下：
XML/XHTML 代码
< 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 >