CSS3 背景設計範例一、background-size 屬性
<style>
#PIC_1{
width:380px;
height:100px;
border:1px #ccc solid;
margin-bottom:15px;
}
#PIC_2{
width:380px;
height:100px;
background-image:url(背景圖片);
background-repeat:no-repeat;
border:1px #ccc solid;
background-size:380px 100px;
}
</style>
這是使用的背景圖片，尺寸為 300x80<br>
<div id="PIC_1"><img src="背景圖片"></div>
這是修改後的背景圖片，尺寸為 360x100<br>
<div id="PIC_2"></div>
範例呈現的效果#PIC_1{
width:380px;
height:100px;
border:1px #ccc solid;
margin-bottom:15px;
}
#PIC_2{
width:380px;
height:100px;
background-image:url(背景圖片);
background-repeat:no-repeat;
border:1px #ccc solid;
background-size:380px 100px;
}
</style>
這是使用的背景圖片，尺寸為 300x80<br>
<div id="PIC_1"><img src="背景圖片"></div>
這是修改後的背景圖片，尺寸為 360x100<br>
<div id="PIC_2"></div>
這是使用的背景圖片，尺寸為 300x80
這是修改後的背景圖片，尺寸為 360x100
在範例一中，我們透過 CSS3 背景設計中的 background-size 屬性，把原本只有 300x80 的背景圖片修改為 360x100 的大小，讓背景圖片可以完全符合 DIV 區塊的大小，如此一來就不會有留白的現象出現，效果有點類似傳統 HTML 的圖片寬度設計。深入研究：CSS3 background-size 屬性
CSS3 背景設計範例二、background-origin 屬性
<style>
#TextDiv{
border:6px #ddd solid;
width:330px;
height:100px;
padding:10px;
background-image:url(背景圖片);
background-repeat:no-repeat;
background-origin:padding-box;
}
</style>
<div id="TextDiv"></div>
範例呈現的效果#TextDiv{
border:6px #ddd solid;
width:330px;
height:100px;
padding:10px;
background-image:url(背景圖片);
background-repeat:no-repeat;
background-origin:padding-box;
}
</style>
<div id="TextDiv"></div>
範例二要呈現的是 CSS3 背景設計的 background-origin 屬性，這個屬性的主要功能是用來設定背景圖片的定位，在範例中，相信各位可以看到那張藍色的背景圖片被定位在邊框的範圍內，沒有壓到邊框的區域，這就是 CSS3 背景設計的一大進步，因為這樣的效果在傳統的設計架構下，要完成是很麻煩的事情，如果透過 CSS3 背景設計功能，可以很輕易的達成，設計出來的網頁當然也就更細緻。
深入研究：CSS3 background-origin 屬性
更多 CSS3 功能