使用jQuery和CSS將背景圖片延伸

現(xiàn)在WEB頁(yè)面設(shè)計(jì)比較流行使用大背景圖，那么您知道如何使用一張大背景圖進(jìn)行拉伸效果呢？也就是說(shuō)使用一張固定尺寸的背景圖片，讓它在頁(yè)面中隨著瀏覽器尺寸進(jìn)行拉伸，就像我們的電腦桌面壁紙效果。本文將帶您一起使用jQuery和CSS實(shí)現(xiàn)背景圖片拉伸效果。

將背景圖片拉伸，而不是平鋪，注意平鋪效果我們可以使用CSS的background-repeat來(lái)實(shí)行背景圖片的平鋪效果，本文討論的是背景圖 片的拉伸效果。這種效果在一些前衛(wèi)的頁(yè)面設(shè)計(jì)中已經(jīng)廣泛應(yīng)用，尤其在一些獨(dú)立頁(yè)面，像登錄頁(yè)面使用拉伸的背景圖片效果比較常見。

目前有兩種解決方案可以實(shí)現(xiàn)背景圖片拉伸效果，一種是CSS，我們可以使用background-size:cover實(shí)現(xiàn)圖片的拉伸效果，但是 IE8及以下版本不支持background-size，于是我們嘗試使用微軟的濾鏡效果，但是IE6不支持，畢竟還有一些后進(jìn)生在使用IE6。另一種解 決方案是使用jQuery，完全解決瀏覽器的兼容性問題，還是jQuery威武。

CSS解決方案我們準(zhǔn)備一張背景圖片，任意尺寸的，假設(shè)我們要做一個(gè)登錄頁(yè)面，頁(yè)面中使用拉升的背景圖。我們只需要在body中加入以下代碼：

<div id=“main”>

….登錄表單

</div>

然后CSS這樣寫：

body{background:url（bg.jpg） center center;background-size:cover;height:900px;width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader（src=‘bg.jpg’， sizingMethod=‘scale’）;} #main{position:absolute; top:50%; left:50%; width:420px; height:250px; margin：-125px 0 0 -210px; background：#ffc}

我們使用background-size實(shí)現(xiàn)了背景圖片的拉伸效果，但是要兼容IE7，IE8就需要使用濾鏡filter來(lái)實(shí)現(xiàn)，注意該方案中，必 須指定容器的高度，本例中指定了height:900px。另外我們要讓登錄窗口居中，CSS寫法參照：如何讓DIV水平和垂直居中

CSS方案有一定的局限性，必須指定容器高度，IE6不兼容，請(qǐng)看DEMO1，那么比較完美的解決方案就是使用jQuery了。

jQuery解決方案我們使用jQuery先向body中動(dòng)態(tài)插入一個(gè)DIV，并且該DIV中包含一張圖片，也就是我們要求拉伸效果的背景圖片。然后使用jQuery獲取瀏覽器窗口的大小，根據(jù)瀏覽器窗口大小，動(dòng)態(tài)設(shè)置背景圖片的尺寸（寬和高）。

$（function（）{

$（“body”）.append（“《div id=‘main_bg’/》”）;

$（“#main_bg”）.append（“《img src=‘bg.jpg’ id=‘bigpic’》”）;

cover（）;

$（window）.resize（function（）{ //瀏覽器窗口變化

cover（）;

}）;

}）

; function cover（）{

var win_width = $（window）.width（）;

var win_height = $（window）.height（）;

$（“#bigpic”）.attr（{width:win_width，height:win_height}）;

}

上述代碼中，cover（）函數(shù)就是動(dòng)態(tài)的設(shè)置了背景圖片的尺寸，通過(guò)jQuery的append方法動(dòng)態(tài)加入背景圖片，當(dāng)頁(yè)面加載完成時(shí)已經(jīng)瀏覽器窗口變化時(shí)都能實(shí)現(xiàn)背景圖片的拉伸效果，也就是頁(yè)面ready和resize都調(diào)用了cover（）函數(shù)。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁(yè)題目：使用jQuery和CSS將背景圖片延伸
標(biāo)題鏈接：http://www.muchs.cn/news26/327176.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、小程序開發(fā)、電子商務(wù)、網(wǎng)站導(dǎo)航、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)