武林網(wǎng)(www.survivalescaperooms.com)文章簡介：在這篇教程中，我會提供多種 CSS 事例來講解，如何使用一張或者兩張圖片來創(chuàng)建大背景網(wǎng)站。

自從我發(fā)表了 大背景網(wǎng)站 合集之后，我收到了很多郵件，詢問怎樣才能用 CSS 來定義網(wǎng)站中的大背景。于是我就想，分享下我在制作大背景網(wǎng)站中所應用到的技術或許是個不錯的主意。在這篇教程中，我會提供多種 CSS 事例來講解，如何使用一張或者兩張圖片來創(chuàng)建大背景網(wǎng)站。

看一下 演示 文件效果, 在 1280px 分辨率時顯示的是正常的。但是在高于這個分辨率的顯示器中，背景的兩則看起來就像是被切短的了。

迅速解決前面提到這一問題: 將圖片邊緣的顏色設置成跟 BODY 背景色相同的顏色。這里我以 Web Designer Wall 作為范例。請檢查，下 圖 中的邊緣用的是純色?

CSS 部分非常簡單。指定 BODY 標簽的背景圖像 (position 定位為 center, top) 。

這里是 CSS 代碼:

注意，在 BODY 選擇器中有兩行額外的代碼。這是為了防止在瀏覽器的內容小于寬度時背景圖片發(fā)生偏移 (這在 Firefox 中會出現(xiàn)).

在這個實例中，我準備用工作中一個樣式模板, Design Jobs on the Wall。我給 BODY 標簽應用了重復的軟木板重復圖案，#wrapper 標簽應用了居中的背景。

這里的小技巧是導出了一張近似軟木板圖案、暗棕色的 gif 圖片。

在這個實例中，我給標簽 BODY 設置了重復 1px 水平方向的漸變。然后給標簽 #wrapper 附上云層背景。

感謝讀者們的評論。下面的天空背景實例是使用 HTML 選擇器來顯示漸變背景，所以 #wrapper DIV 標簽也就不需要了。這是一個更清潔的方式。

立即下載 范例 zip，不要忘了點擊 80個應用大背景圖片的網(wǎng)站.