前面已經(jīng)介紹了網(wǎng)頁設(shè)計中的前景和背景色基礎(chǔ)知識，下面來討論背景圖像。在HTML3.2中，可以通過使用BODY屬性BACKGROUND向文檔的背景關(guān)聯(lián)一個圖像：
<BODY BACKGROUND="bg23.gif">
這會使用戶代理加載文件知然后把它“平鋪”在文檔背景中，沿水平方向和垂直方向重復(fù)放置這個圖像，填滿文檔的整個背景。這種效果利用網(wǎng)站建設(shè)CSS也可以達到，不過CSS并不只是簡單地將背景圖像平鋪，還能做更多的工作。首先來介紹基礎(chǔ)知識，再來看如何使用。
使用圖像
首先，要把圖像放入背景，需要使用屬性background-image。
background-image
值：<uri> | none | inherit
初始值：none
應(yīng)用于：所有元素
繼承性：無
計算值：絕對URI
默認值none表示的含義正是網(wǎng)頁設(shè)計師所期望的：背景上沒有放任何圖像。如果設(shè)計師希望有一個背景圖像，必須為這個屬性指定一個URL值：
body{background-Image:url(bg23.gif);}
如果其他背景屬性取默認值，這就會把圖像bg23.gif平鋪在文檔的背景上，如圖9-12所示。不過，稍后會看到，在網(wǎng)頁設(shè)計中平鋪并不是唯一的選擇。
注意：指定背景圖像的同時可以再指定一個背景色。這往往是個好主意，本章稍后還會再談到這個概念。
允許向任何元素應(yīng)用背景圖像，可以是塊級元素也可以是行內(nèi)元素。當然，大多數(shù)背景都應(yīng)用到body元素，不過并不僅限于此：
圖9-12：在網(wǎng)站建設(shè)CSS中應(yīng)用一個背景圖像
p.starry(background-image:url(http://www.site.web/pix/stars.gif); color:white;}
a.grid{background-image:url(smallgrid.gif);}
<p class="starry">It's the end of autumn,which means Che stars will be brighter than ever!<a href="join.html*class="grid">Join us</a>for a fabulous evening of planets,scars,nebulae,and more…
在圖9-13中可以看到，這里向一個段落應(yīng)用了一個背景，而沒有對文檔的其他部分應(yīng)用背景。還可以進一步定制，如把背景圖像放在超鏈接等行內(nèi)元素上，這在圖9-13中也有顯示。當然，如果網(wǎng)頁設(shè)計師希望能看到平鋪模式，可能要求這個圖像必須很小。畢竟，單個字母不會太大！
圖9-13：為塊級元素和行內(nèi)元素應(yīng)用背景圖像
有很多方法可以利用特定的背景圖像?？梢园褕D像放在strong元素的背景中，使之更突出?？梢杂貌ɡ四Ｊ交蛐A點填充標題的背景。甚至可以在表單元格中填入模式，使之與頁面中的其他部分相區(qū)別，如圖9-14所示：
td.nav{background-image:url(darkgrid.gif);}
圖9-14：設(shè)置表單元格的背景圖像
理論上講，甚至可以向textareas和select列表等替換元素的背景應(yīng)用圖像，不過并不是所有用戶代理都能很好地處理這種情況。
類似于background-color,background-image也不能繼承——實際上，所有背景屬性都不能繼承。還要記住，指定背景圖像的URL時，關(guān)于url值的限制和警告還是一如從前：相對URL要結(jié)合樣式表來解釋，不過Navigator 4.x不能正確地做到這一點，所以絕對URL可能是一個更好的選擇。
當前文章標題：網(wǎng)頁設(shè)計中的背景圖像
當前URL：http://www.gtalker.cn/news/wzzz/background-image.html
