CSS3背景實(shí)例分析

本文小編為大家詳細(xì)介紹“CSS3背景實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS3背景實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

    CSS3背景

    CSS3中包含幾個(gè)新的背景屬性，提供更大背景元素控制。

    您將了解以下背景屬性：

    background-image

    background-size

    background-origin

    background-clip

    CSS3background-image屬性

    CSS3中可以通過(guò)background-image屬性添加背景圖片。

    不同的背景圖像和圖像用逗號(hào)隔開(kāi)，所有的圖片中顯示在最頂端的為第一張。

    實(shí)例

#example1 { 

    background-image: url(img_flwr.gif), url(paper.gif); 

    background-position: right bottom, left top; 

    background-repeat: no-repeat, repeat; 

}

    可以給不同的圖片設(shè)置多個(gè)不同的屬性

    實(shí)例

#example1 {

    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

}

    CSS3background-size屬性

    background-size指定背景圖像的大小。CSS3以前，背景圖像大小由圖像的實(shí)際大小決定。

    CSS3中可以指定背景圖片，讓我們重新在不同的環(huán)境中指定背景圖片的大小。您可以指定像素或百分比大小。

    你指定的大小是相對(duì)于父元素的寬度和高度的百分比的大小。

    實(shí)例1

    重置背景圖像：

div

{

    background:url(img_flwr.gif);

    background-size:80px 60px;

    background-repeat:no-repeat;

}

    實(shí)例2

    伸展背景圖像完全填充內(nèi)容區(qū)域：

div

{

    background:url(img_flwr.gif);

    background-size:100% 100%;

    background-repeat:no-repeat;

}

    CSS3的background-origin屬性

    background-origin屬性指定了背景圖像的位置區(qū)域。

    content-box,padding-box,和border-box區(qū)域內(nèi)可以放置背景圖像。

    實(shí)例

    在content-box中定位背景圖片：

div

{

    background:url(img_flwr.gif);

    background-repeat:no-repeat;

    background-size:100% 100%;

    background-origin:content-box;

}

    CSS3多個(gè)背景圖像

    CSS3允許你在元素上添加多個(gè)背景圖像。

    實(shí)例

    在body元素中設(shè)置兩個(gè)背景圖像：

body

{ 

    background-image:url(img_flwr.gif),url(img_tree.gif);

}

    CSS3background-clip屬性

    CSS3中background-clip背景剪裁屬性是從指定位置開(kāi)始繪制。

    實(shí)例

#example1 { 

    border: 10px dotted black; 

    padding: 35px; 

    background: yellow; 

    background-clip: content-box; 

}

讀到這里，這篇“CSS3背景實(shí)例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。