CSS3 多重背景圖片設計

CSS 的 background-image 用來替網頁本身(body)或網頁元素插入背景圖片相當好用,這個背景圖片屬性到了 CSS3 有了更強大的進步,CSS 設計師可以利用全新的 background-image 屬性設計出具有多重背景圖片的效果,而且使用方式非常簡單,就是在傳統插入一張背景圖片的模式,增加為插入兩張或兩張以上的背景圖片,讓瀏覽器同時呈現出兩個背景圖片重疊的效果,對於想要創造網頁多層次感背景圖片的風格相當有幫助,如果你還不熟悉 background-image 屬性的語法,我們這裡先來複習一下 。

CSS background image 屬性語法
background-image: url(背景圖片網址), url(背景圖片網址) ...;
參數的部分就是背景圖片插入的網址,CSS3 開始讓 background-image 屬性允許使用多個不同的 url 參數來增加背景圖片的數量,我們這一篇由於要設計出多重網頁背景圖片的效果,所以待會的範例中,我們會在同一個 background-image 屬性內,使用三個 url 參數來插入三張不同的背景圖片,馬上就來看看實際的範例應用。

CSS3多重背景圖片實際設計範例
<style>
#multiple_background_image{
width:100%;
height:500px;
background-image: url(upload/20150615125139.png), url(upload/20150615125142.png),url(upload/20150615125145.png);
}
</style>
<div id="multiple_background_image"></div>
這裡使用的三張背景圖片是這三張(用表格呈現給各位看)

套用後的多重背景圖片視覺效果如下
將三張不同的背景圖片套用到 background-image 屬性後,可以看到非常繽紛的效果,因為每一張背景圖片都有呈現出來,層疊在一起就會有這樣的視覺效果,同樣的概念可以透過不同的背景圖片,設計出更精緻的多層次感背景效果。

有一個關鍵→ png

這裡要稍微提醒一下,要製作這種多重背景圖片的效果,所選用的背景圖片必須是透明圖檔,也就是說,要顯示的圖案可以正常顯示,其他的部份要是透明的,例如我們在範例中所使用的三張圖片,全部都是使用有透明效果的 png 圖檔。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C