CSS3 背景設計

CSS3 在網頁元素背景設計的部份,比起 CSS2 又有了更進一步的提升,主要提供了可以用來控制背景大小的 background-size 屬性以及可以用來控制背景定位的 background-origin 屬性,這兩個屬性用起來雖然語法稍微複雜了一點(主要是參數較多樣化),不過卻可以達到以往無法做到的網頁元素背景特效,例如 background-size 屬性可以設定讓背景圖片隨的螢幕縮放而自動跟著縮放,這在傳統的網頁設計技術,是必須用 Flash 來製作的,不過現在可以直接透過 CSS3 的背景設計屬性做到,而且效果還不錯,以下我們將這兩個 CSS3 新增的背景設計功能,利用範例的方式呈現給各位參考。

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>
範例呈現的效果
這是使用的背景圖片,尺寸為 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>
範例呈現的效果
範例二要呈現的是 CSS3 背景設計的 background-origin 屬性,這個屬性的主要功能是用來設定背景圖片的定位,在範例中,相信各位可以看到那張藍色的背景圖片被定位在邊框的範圍內,沒有壓到邊框的區域,這就是 CSS3 背景設計的一大進步,因為這樣的效果在傳統的設計架構下,要完成是很麻煩的事情,如果透過 CSS3 背景設計功能,可以很輕易的達成,設計出來的網頁當然也就更細緻。

深入研究:CSS3 background-origin 屬性

更多 CSS3 功能
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012