CSS DIV 背景圖片

CSS DIV 背景圖片的設定,可以讓一個原本很單純的 DIV 區塊變得很有質感,在 CSSDIV 區塊排版設計時,是一種非常普遍的設計技巧,優點是比單純的設計《CSS DIV 背景顏色》有著更多的變化,不過要使用 DIV 背景圖片,需要設計師花較多的時間準備,除了背景圖片本身的設計與選材之外,DIV 區塊本身也有尺寸上的設計規則唷!以下就準備一個簡單的 DIV 背景圖片設計範例讓各位參考,重點在 css background-image 背景圖片屬性的使用。

CSS DIV 背景圖片範例
呈現效果
這是有背景圖片的 DIV 區塊
範例就是一個簡單的 DIV 區塊,我們只不過在開頭的 DIV 標籤內使用了 style 來宣告一段 CSS 的語法,讓 DIV 區塊成為一個寬 500px(width:500px;)、高 100px(height:100px;)的尺寸,接著就透過 background-image 屬性,將背景圖片墊到 DIV 區塊底部,我們在這個範例所準備的背景圖片尺寸剛好就是 500x100 的大小。使用 DIV 背景圖片的重點就是 DIV 本身的尺寸要與背景圖片的尺寸一樣,這樣就可以整張圖片完美結合,當然偶爾我們會用其他種技巧,例如小張的圖片重複出現也是不錯的效果,有時間再分享技巧。

background-image 屬性中 url 的小括號內,就是放背景圖片網址的地方,最好是將圖片放在網站根目錄,以免出現圖片消失的問題,常常看到許多網站或論壇,用外連的方式插入圖片到 DIV 背景,時間久了之後,圖片都消失了,畢竟用別人的圖檔本來就是有風險的。

如果你不想用背景圖片,只想單純替 DIV 增加背景顏色,請看這篇:CSS DIV 背景顏色
分享於 2014-08-22