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