CSS3嘗鮮(二):用CSS設定多個背景、背景漸層、指定背景大小

來源:互聯網
上載者:User

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 

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.