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