在制作網頁過程中，經常需要考慮頁面中的留白問題，因為我們設計時，按大多數用戶顯示器的設置來制作內容區，即橫向分辨率的設置是1024像素，可是用戶設置是多樣化的比如有的用戶是1280、1440、1600、1680等，內容區之外會有很多的留白，為了美觀起見，不可避免地需要對留白區進行一些處理。
　　下面是一般的做法。
　　1、用一個圖片來做背景，其余的地方填充顏色。
　　　　①背景圖很大，不鋪；
　　　　②背景圖片很長，只是橫向鋪而縱向不鋪；
　　　　③一張圖片橫向縱向都鋪。
　　　　根據效果選擇，關鍵是背景圖片的處理。
　　2、留白的地方要多樣化，可以用多個垂直疊放的DIV來處理，中間內容區域都設置為996px，DIV里面的背景圖可以按照1所列的方法，這樣的效果是比較理想的，就是選擇和處理背景圖片需要一些功夫。
　　3、采用腳本控制，判斷用戶設置的橫向分辨率如果大于1024，則DIV顯示，否則就不顯示。
　　先把一些處理寫成樣式，然后
　　if(screen.width>=1024){
　　　　?document.write("<style type='text/css'>樣式表的內容</style>");
　　}
　　或者應用Jquery進行屬性的修改.

　　有時候根據需要進行背景變換，那么可以通過腳本來實現。
　　function ChangeBG(SSelect)?
　　{?
　　　　if(SSelect == 'color')?
　　　　{?
　　　　//改變背景色?
　　　　　　document.body.style.backgroundColor="顏色代碼";
　　　　}?
　　　　if(SSelect == 'image')?
　　　　{?
　　　　//改變背景圖片
　　　　　　document.body.style.backgroundImage="url(圖片路徑和名稱)";?
　　　　}?
　　}?
　　在對DIV進行背景鋪設時，也可以用腳本來控制顯示背景。
　　隨機背景：
　　var BgPic = [];
　　BgPic[0] = "圖片路徑和名稱１";
　　BgPic[1] = "圖片路徑和名稱２";
　　BgPic[2] = "圖片路徑和名稱３";
　　var IRand = Math.round( Math.random() * 3 );
　　document.write('<style>body{background:url(' + BgPic[IRand] + ');background-repeat:repeat-x;background-color:#e7e7e7; }</style>');

?

總結

以上是生活随笔為你收集整理的网页制作中的背景处理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。