【大(dà)連網龍科技】在我們的(de)網站設計中，背景是相當重要的(de)，往往一個(gè)好的(de)背景能吸引人(rén)的(de)注意力，并且能讓别人(rén)注意到你的(de)網站。如果你經常注意别人(rén)的(de)網站，你應該會發現在不同的(de)網站上，甚至同一個(gè)網站的(de)不同頁面上，都會有各式各樣的(de)不同的(de)背景設計。究竟都有哪些不同樣式的(de)背景，還(hái)有它們的(de)設計方法都是怎樣的(de)呢(ne)，現在就由我來(lái)爲大(dà)家作一個(gè)比較完整的(de)總結。
1.照(zhào)片背景
把自己或朋友的(de)照(zhào)片作爲頁面的(de)背景讓大(dà)家看到，是有點令人(rén)激動的(de)事情，但浏覽器對(duì)圖片的(de)自動重複排列卻使這(zhè)一願望難以實現。怎麽辦呢(ne)？隻有想不到的(de)，沒有做(zuò)不到的(de)，這(zhè)裏我們用(yòng)上一點簡單的(de)CSS。在網頁文件的(de)……之間加入下(xià)面的(de)CSS語句:
這(zhè)樣，在網頁頁面中，就可(kě)以看到你的(de)照(zhào)片位于頁面的(de)正中間，而且在拉動浏覽器窗(chuāng)口的(de)滾動條時(shí)，照(zhào)片仍然位于頁面的(de)正中間而不随頁面内容一起滾動。如果你覺得(de)照(zhào)片位于頁面的(de)正中間不滿意，你也(yě)可(kě)以随意地調整它在頁面中的(de)位置，隻需要調整"background-position"的(de)值就可(kě)以了(le)。
2.局部背景
前面我們所說的(de)背景都是整個(gè)頁面的(de)背景，能不能在頁面上爲某個(gè)局部的(de)内容設置屬于它自己的(de)背景呢(ne)？回答(dá)是肯定的(de)。最爲常見的(de)是在表格的(de)設計當中，我們可(kě)以爲表格設置一個(gè)不同于頁面的(de)背景，甚至在不同的(de)表格單元中，我們也(yě)可(kě)以設置各個(gè)表格單元自己的(de)背景。
3.條狀背景
條狀背景與沙紋背景是比較相似的(de)，它适用(yòng)于頁面背景在水(shuǐ)平或豎直方向上看是重複排列的(de)，而在另一方向上看則是沒有規律的(de)。它也(yě)是利用(yòng)浏覽器對(duì)圖片背景的(de)自動重複排列，與沙紋背景所不同的(de)是它隻讓圖片在一個(gè)方向上重複排列。
以在豎直方向上排列爲例，首先用(yòng)圖像處理(lǐ)軟件做(zuò)一個(gè)從左到右爲藍白漸變的(de)水(shuǐ)平條狀圖片，其長(cháng)度與頁面的(de)寬度相當。也(yě)通(tōng)過将其設爲頁面背景，經浏覽器顯示後，就成爲整個(gè)頁面從左到右藍白漸變的(de)分(fēn)欄顔色背景。當然，也(yě)可(kě)以用(yòng)類似的(de)方法實現條狀背景在水(shuǐ)平方向上的(de)重複排列。
4.沙紋背景
沙紋背景其實屬于圖片背景的(de)範疇，它的(de)主要特點是整個(gè)頁面的(de)背景可(kě)以看作是局部背景的(de)反複重排，在這(zhè)類背景中以沙紋狀的(de)背景是爲常見，所以我們将其統稱爲沙紋背景。
初學主頁制作者都有這(zhè)樣的(de)經曆，當試圖把自己的(de)照(zhào)片作爲頁面的(de)背景是，卻發現浏覽器上顯示出來(lái)的(de)不僅僅是一個(gè)照(zhào)片，而是同一照(zhào)片在水(shuǐ)平和(hé)豎直方向上的(de)反複排列。這(zhè)就是浏覽器處理(lǐ)圖片背景時(shí)的(de)規律方法，利用(yòng)這(zhè)一規律我們可(kě)以用(yòng)一小塊圖片作爲頁面背景，讓它自動在頁面上重複排列，鋪滿整個(gè)頁面，從而使網頁的(de)體積大(dà)大(dà)減小。
讀者到現在恐怕都已經知道了(le)沙紋背景的(de)原理(lǐ)和(hé)實現方法，就是找一個(gè)小的(de)圖片，越小越好，但注意要使最後的(de)背景看起來(lái)要像一個(gè)整體，而不是若幹圖片的(de)堆砌。其實現的(de)HTML語法如下(xià)：其中的(de)"picture"表示背景圖片的(de)URL路徑。
5.複合背景
如果你在練習(xí)上面的(de)“照(zhào)片背景”時(shí)“不小心”也(yě)設置?lt;body>标簽裏的(de)顔色背景，那麽你看到了(le)什(shén)麽？顔色背景還(hái)起作用(yòng)嗎？對(duì)，你能看到你的(de)照(zhào)片浮于你設的(de)顔色背景之上，二者能夠同時(shí)正常地顯示出來(lái)。這(zhè)就是複合背景的(de)魅力，更爲吸引人(rén)的(de)是，當你所設置的(de)圖片背景因爲某種不可(kě)知的(de)因素而不能正常顯示的(de)時(shí)候，浏覽器能夠自動用(yòng)你所設置的(de)顔色背景取而代之。它的(de)設計方法，就不用(yòng)我再多(duō)說了(le)吧！
6.顔色背景
顔色背景的(de)設計是最爲簡單的(de)，但同時(shí)也(yě)是最爲常用(yòng)和(hé)最爲重要的(de)，因爲相對(duì)于圖片背景來(lái)說，它有無與倫比的(de)顯示速度上的(de)優勢。在網頁文件中，一般通(tōng)過标簽來(lái)指定頁面的(de)顔色背景，其HTML語法爲：其中的(de)"color"表示不同的(de)顔色，可(kě)以用(yòng)各種不同的(de)顔色表示方法，比較常用(yòng)的(de)有直接用(yòng)顔色的(de)英文名稱，如blue、yellow、black等等，還(hái)可(kě)以用(yòng)顔色的(de)十六進制表示方法，如#0000FF、#FFFF00、#000000等等，此外還(hái)可(kě)以用(yòng)百分(fēn)比值法和(hé)整數法，其效果都是一樣的(de)。
網站設計顔色背景雖然比較簡單，但也(yě)有不少地方需要注意，如要根據不同的(de)頁面内容設計背景顔色的(de)冷(lěng)暖狀态，要根據頁面的(de)編排設計背景顔色與頁面内容的(de)最佳視覺搭配等等。
