CSS3背景實例分析

本文小編為大家詳細介紹“CSS3背景實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“CSS3背景實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

    CSS3背景

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

    您將了解以下背景屬性：

    background-image

    background-size

    background-origin

    background-clip

    CSS3background-image屬性

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

    不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。

    實例

#example1 { 

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

    background-position: right bottom, left top; 

    background-repeat: no-repeat, repeat; 

}

    可以給不同的圖片設置多個不同的屬性

    實例

#example1 {

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

}

    CSS3background-size屬性

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

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

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

    實例1

    重置背景圖像：

div

{

    background:url(img_flwr.gif);

    background-size:80px 60px;

    background-repeat:no-repeat;

}

    實例2

    伸展背景圖像完全填充內容區域：

div

{

    background:url(img_flwr.gif);

    background-size:100% 100%;

    background-repeat:no-repeat;

}

    CSS3的background-origin屬性

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

    content-box,padding-box,和border-box區域內可以放置背景圖像。

    實例

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

div

{

    background:url(img_flwr.gif);

    background-repeat:no-repeat;

    background-size:100% 100%;

    background-origin:content-box;

}

    CSS3多個背景圖像

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

    實例

    在body元素中設置兩個背景圖像：

body

{ 

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

}

    CSS3background-clip屬性

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

    實例

#example1 { 

    border: 10px dotted black; 

    padding: 35px; 

    background: yellow; 

    background-clip: content-box; 

}

讀到這里，這篇“CSS3背景實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。