用CSS設置多個背景、背景漸變、指定背景大小

CSS3規范中對背景這一部分，新加入了一些令人興奮的功能，如可以設置多個背景圖片、可以指定背景大小、設置背景漸變等功能。CSS3規范中定義的背景屬性有：

屬性名	可能的值	默認值
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中寫的順序來定，最先寫的背景在最上層。

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   >

以上例子的最終顯示效果如下圖所示（如果圖片不能顯示，請直接點擊鏈接查看）。查看本例子的效果需要Firefox 3.6，Chrime，Safari4的瀏覽器。其中 Firefox 3.6可以看到全部的效果。 
http://dotnet.aspx.cc/Images/mengxianhui_css3_3.jpg