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