CSS3 Background 屬性介紹

與border相似，ie對新的background屬性都是不支持的。多的就不說了，來看看，新的background 屬性吧。

一、background-origin  控制背景圖片區域
三個取值,由外向內分別爲: border-box,padding-box,content-box
默認爲padding-box

<style type="text/css">
<!--
.bg-origin {
width:250px; border:20px dotted #000; padding:20px; position:relative;
text-align:center; font-weight:bold; color:#f00;
background:#ccc url(img/logo.png) no-repeat;
background-origin:content-box;
}
span.bg-padding { position:absolute;top:0; }
div.bg-content { height:80px; border:1px solid #000; }
-->
</style>
<div class="bg-origin">
<span class="bg-padding">padding</span>
<div class="bg-content">content</div>
</div>

效果如圖

二、background-clip  控制背景圖區域,將控制區域外的背景裁切
三個取值,由外向內分別爲: border-box,padding-box,content-box
默認取值爲border-box

<style type="text/css">
<!--
.bg-clip {
width:250px; border:20px dotted #000; padding:20px; position:relative;
text-align:center; font-weight:bold; color:#f00;
background:#ccc url(img/logo.png) no-repeat;
background-clip:content-box;
}
span.bg-padding { position:absolute;top:0; }
div.bg-content { height:80px; border:1px solid #000; }
-->
</style>
<div class="bg-clip">
<span class="bg-padding">padding</span>
<div class="bg-content">content</div>
</div>

效果如圖：

三、background-size  控制背景圖片大小，拉伸控制圖片
以像素或百分比控制，基於Gecko引擎的火狐瀏覽器目前尚不支持

<style type="text/css">
<!--
.bg-size {
border: 1px solid #CCCCCC; padding:90px 5px 10px;
background:url(img/logo.png) no-repeat ;
-webkit-background-size: 100% 80px;
-o-background-size: 100% 80px;
}
-->
</style>
<div class="bg-size">這裏的<code>background-size: 100% 80px</code> 背景圖片將與DIV同樣寬，高爲80px。</div>

谷歌瀏覽器下效果：

四、Multiple backgrounds
background 包含一會兒屬性
 background-p_w_picpath ： 指定或檢索對象的背景圖像。
 background-origin ： 指定背景的顯示區域。參見background-origin
 background-clip ： 指定背景的裁剪區域。參見background-clip
 background-repeat ： 設置或檢索對象的背景圖像是否及如何重複鋪排。
 background-size ： 指定背景圖片的大小。參見background-size
 background-position ： 設置或檢索對象的背景圖像位置。
 CSS3手冊中有以下介紹：

CSS3中在容器的多層背景，各子屬性與逗號來分隔值，若是指定的值，以下：
background-p_w_picpath: w1, w2, w3,…, wM
background-repeat: x1, x2, x3,…, xR
background-size: y1, y2, y3,…, yS
background-position: s1, s2, s3,…, sP

各個控制數值一一對應
這邊以一個簡單的上下左右控制的綜合背景圖爲例

<style type="text/css">
<!--
.mult-bg {
background-p_w_picpath: url(img/bgt.png),url(img/bgr.png),url(img/bgb.png),url(img/bgl.png);
background-position: center top, right center, center bottom,left center;
background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;width:260px;padding:20px;
}
-->
</style>
<div class="mult-bg"><p>多背景示範容器</p></div>

所用的背景圖：

效果如圖：

仍是因爲當前的兼容問題，在作美化的過程當中，要儘可能作到平穩過分

雖然說標準還沒有出臺，不過先熟悉熟悉老是好事 :-)