這篇文章主要講解了“如何使用jQuery和CSS將背景圖片拉伸”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何使用jQuery和CSS將背景圖片拉伸”吧！
現在WEB頁面設計比較流行使用大背景圖，那么您知道如何使用一張大背景圖進行拉伸效果呢？也就是說使用一張固定尺寸的背景圖片，讓它在頁面中隨著瀏覽器尺寸進行拉伸，就像我們的電腦桌面壁紙效果。本文將帶您一起使用jQuery和CSS實現背景圖片拉伸效果。
將背景圖片拉伸，而不是平鋪，注意平鋪效果我們可以使用CSS的background-repeat來實行背景圖片的平鋪效果，本文討論的是背景圖片的拉伸效果。這種效果在一些前衛的頁面設計中已經廣泛應用，尤其在一些獨立頁面，像登錄頁面使用拉伸的背景圖片效果比較常見。
目前有兩種解決方案可以實現背景圖片拉伸效果，一種是CSS，我們可以使用background-size:cover實現圖片的拉伸效果，但是IE8及以下版本不支持background-size，于是我們嘗試使用微軟的濾鏡效果，但是IE6不支持，畢竟還有一些后進生在使用IE6。另一種解決方案是使用jQuery，完全解決瀏覽器的兼容性問題，還是jQuery威武。
我們準備一張背景圖片，任意尺寸的，假設我們要做一個登錄頁面，頁面中使用拉升的背景圖。我們只需要在body中加入以下代碼：
<p id="main">
...登錄表單
</p>
然后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實現了背景圖片的拉伸效果，但是要兼容IE7,IE8就需要使用濾鏡filter來實現，注意該方案中，必須指定容器的高度，本例中指定了height:900px。另外我們要讓登錄窗口居中，CSS寫法參照：如何讓DIV水平和垂直居中
CSS方案有一定的局限性，必須指定容器高度，IE6不兼容，請看DEMO1，那么比較完美的解決方案就是使用jQuery了。
我們使用jQuery先向body中動態插入一個DIV，并且該DIV中包含一張圖片，也就是我們要求拉伸效果的背景圖片。然后使用jQuery獲取瀏覽器窗口的大小，根據瀏覽器窗口大小，動態設置背景圖片的尺寸（寬和高）。
$(function(){
$("body").append("<p 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()函數就是動態的設置了背景圖片的尺寸，通過jQuery的append方法動態加入背景圖片，當頁面加載完成時已經瀏覽器窗口變化時都能實現背景圖片的拉伸效果，也就是頁面ready和resize都調用了cover()函數。
感謝各位的閱讀，以上就是“如何使用jQuery和CSS將背景圖片拉伸”的內容了，經過本文的學習后，相信大家對如何使用jQuery和CSS將背景圖片拉伸這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
