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多重背景圖片實際設計範例

這裡使用的三張背景圖片是這三張（用表格呈現給各位看）

套用後的多重背景圖片視覺效果如下

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

有一個關鍵→ png

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

延伸閱讀