CSS3教程-背景

前端開發的程式員們，每天給大家講解一些關於CSS3教程的知識是多麼開心的一件事啊，CSS3 包含多個新的背景屬性，它們提供了對背景更強大的控制。

在本文，您將學到以下兩種背景屬性：

1、background-size；

2、background-origin。

您也將學到如何使用多重背景圖片。

瀏覽器支援

我們首先來瞭解CSS3 background-size 屬性:

background-size 屬性規定背景圖片的尺寸。

在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，可以規定背景圖片的尺寸，這就允許我們在不同的環境中重複使用背景圖片。

您能夠以像素或百分比規定尺寸。如果以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。

例子 1：

調整背景圖片的大小：

div{background:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;}

例子 2：

對背景圖片進行展開，使其完成填充內容地區：

div{background:url(bg_flower.gif);-moz-background-size:40% 100%; /* 老版本的 Firefox */background-size:40% 100%;background-repeat:no-repeat;}

再來看看CSS3 background-origin 屬性：

background-origin 屬性規定背景圖片的定位地區。

背景圖片可以放置於 content-box、padding-box 或 border-box 地區。

執行個體：

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

div{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;}

CSS3 多重背景圖片：

CSS3 允許您為元素使用多個背景映像。

執行個體：

為 body 元素設定兩幅背景圖片：

body{background-image:url(bg_flower.gif),url(bg_flower_2.gif);}

新的背景屬性：

以上就是CSS3教程-背景的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

