网页制作中的背景处理
在制作網(wǎng)頁(yè)過(guò)程中,經(jīng)常需要考慮頁(yè)面中的留白問(wèn)題,因?yàn)槲覀冊(cè)O(shè)計(jì)時(shí),按大多數(shù)用戶顯示器的設(shè)置來(lái)制作內(nèi)容區(qū),即橫向分辨率的設(shè)置是1024像素,可是用戶設(shè)置是多樣化的比如有的用戶是1280、1440、1600、1680等,內(nèi)容區(qū)之外會(huì)有很多的留白,為了美觀起見(jiàn),不可避免地需要對(duì)留白區(qū)進(jìn)行一些處理。
下面是一般的做法。
1、用一個(gè)圖片來(lái)做背景,其余的地方填充顏色。
①背景圖很大,不鋪;
②背景圖片很長(zhǎng),只是橫向鋪而縱向不鋪;
③一張圖片橫向縱向都鋪。
根據(jù)效果選擇,關(guān)鍵是背景圖片的處理。
2、留白的地方要多樣化,可以用多個(gè)垂直疊放的DIV來(lái)處理,中間內(nèi)容區(qū)域都設(shè)置為996px,DIV里面的背景圖可以按照1所列的方法,這樣的效果是比較理想的,就是選擇和處理背景圖片需要一些功夫。
3、采用腳本控制,判斷用戶設(shè)置的橫向分辨率如果大于1024,則DIV顯示,否則就不顯示。
先把一些處理寫(xiě)成樣式,然后
if(screen.width>=1024){
?document.write("<style type='text/css'>樣式表的內(nèi)容</style>");
}
或者應(yīng)用Jquery進(jìn)行屬性的修改.
有時(shí)候根據(jù)需要進(jìn)行背景變換,那么可以通過(guò)腳本來(lái)實(shí)現(xiàn)。
function ChangeBG(SSelect)?
{?
if(SSelect == 'color')?
{?
//改變背景色?
document.body.style.backgroundColor="顏色代碼";
}?
if(SSelect == 'image')?
{?
//改變背景圖片
document.body.style.backgroundImage="url(圖片路徑和名稱)";?
}?
}?
在對(duì)DIV進(jìn)行背景鋪設(shè)時(shí),也可以用腳本來(lái)控制顯示背景。
隨機(jī)背景:
var BgPic = [];
BgPic[0] = "圖片路徑和名稱1";
BgPic[1] = "圖片路徑和名稱2";
BgPic[2] = "圖片路徑和名稱3";
var IRand = Math.round( Math.random() * 3 );
document.write('<style>body{background:url(' + BgPic[IRand] + ');background-repeat:repeat-x;background-color:#e7e7e7; }</style>');
?
總結(jié)
以上是生活随笔為你收集整理的网页制作中的背景处理的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: uva 299 - Train Swap
- 下一篇: Android SharedPrefe