增加 CSS DIV 區塊背景圖片

替 DIV 區塊增加背景圖片是一種網頁美化設計的技巧，在之前的一篇內容中，我們介紹了修改 CSS DIV 區塊背景顏色的技巧，已經可以呈現出許多不同的視覺效果，不過單純的修改 DIV 背景顏色，有的時候還不夠精緻，所以網頁設計師常常會使用增加 DIV 區塊背景圖片的技巧，來提升整體的視覺呈現，CSS 的 background-image 屬性是標準的背景圖片設計屬性，我們可以利用這個屬性，輕鬆的把背景圖片插入到 DIV 區塊中，先來看看這個 background-image 屬性的語法，然後再套用到範例給各位讀者們參考。

CSS background-image 屬性語法
background-image:url('image url');
網頁設計師可以自己給 background-image 一個可以正常顯示的 image url，也就是圖片網址，需要注意的是這個圖片是必須可以正常顯示的圖片，除此之外，沒有別的要設定了，套用到範例看看吧！

CSS background-image 屬性範例
<style>
#DIV1{
width:300px;
height:200px;
background-color:green;　//綠色背景顏色
border:1px #ccc solid;
}
#DIV2{
width:300px;
height:200px;
background-image:url(upload/20150202233201.png);　//插入背景圖片
background-color:green;　//綠色背景顏色
border:1px #ccc solid;
}
</style>
<div id="DIV1">
這是沒套用背景圖片的 DIV 區塊
</div>
<div id="DIV2">
這是有套用背景圖片的 DIV 區塊
</div>
範例的背景效果
這是沒套用背景圖片的 DIV 區塊
這是有套用背景圖片的 DIV 區塊
範例有兩個 DIV 區塊，為了讓背景圖片效果更加明顯，我們替兩個 DIV 區塊都加上了綠色的背景顏色，只有地二個區塊有套用背景圖片的 background-image 屬性，應該可以很明顯得看出來，有背景圖片的區塊完全把背景顏色遮蓋掉了，對瀏覽器來說，背景圖片的重要性要遠大於背景顏色，以上就是替 DIV 區塊增加背景圖片的簡單方式。

延伸閱讀
© Copyright webtech.tw Since 2010