自從我發(fā)表了 大背景網(wǎng)站 合集之后,我收到了很多郵件,詢問(wèn)怎樣才能用 CSS 來(lái)定義網(wǎng)站中的大背景。于是我就想,分享下我在制作大背景網(wǎng)站中所應(yīng)用到的技術(shù)或許是個(gè)不錯(cuò)的主意。在這篇教程中,我會(huì)提供多種 CSS 事例來(lái)講解,如何使用一張或者兩張圖片來(lái)創(chuàng)建大背景網(wǎng)站。
看一下 演示 文件效果, 在 1280px 分辨率時(shí)顯示的是正常的。但是在高于這個(gè)分辨率的顯示器中,背景的兩則看起來(lái)就像是被切短的了。

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

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

這里是 CSS 代碼:
body { padding: 0; margin: 0; background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top; width: 100%; display: table;}注意,在 BODY 選擇器中有兩行額外的代碼。這是為了防止在瀏覽器的內(nèi)容小于寬度時(shí)背景圖片發(fā)生偏移 (這在 Firefox 中會(huì)出現(xiàn)).

在這個(gè)實(shí)例中,我準(zhǔn)備用工作中一個(gè)樣式模板, Design Jobs on the Wall。我給 BODY 標(biāo)簽應(yīng)用了重復(fù)的軟木板重復(fù)圖案,#wrapper 標(biāo)簽應(yīng)用了居中的背景。

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

在這個(gè)實(shí)例中,我給標(biāo)簽 BODY 設(shè)置了重復(fù) 1px 水平方向的漸變。然后給標(biāo)簽 #wrapper 附上云層背景。

感謝讀者們的評(píng)論。下面的天空背景實(shí)例是使用 HTML 選擇器來(lái)顯示漸變背景,所以 #wrapper DIV 標(biāo)簽也就不需要了。這是一個(gè)更清潔的方式。

立即下載 范例 zip
新聞熱點(diǎn)
疑難解答
圖片精選