利用jQuery和CSS將背景圖片展開，jquerycss背景圖片

利用jQuery和CSS將背景圖片展開，jquerycss背景圖片

現在WEB頁面設計比較流行使用大背景圖，那麼您知道如何使用一張大背景圖進行展開效果呢？也就是說使用一張固定尺寸的背景圖片，讓它在頁面中隨著瀏覽器尺寸進行展開，就像我們的電腦案頭壁紙效果。本文將帶您一起使用jQuery和CSS實現背景圖片展開效果。

將背景圖片展開，而不是平鋪，注意平鋪效果我們可以使用CSS的background-repeat來實行背景圖片的平鋪效果，本文討論的是背景圖片的展開效果。這種效果在一些前衛的頁面設計中已經廣泛應用，尤其在一些獨立頁面，像登入頁面使用展開的背景圖片效果比較常見。
目前有兩種解決方案可以實現背景圖片展開效果，一種是CSS，我們可以使用background-size:cover實現圖片的展開效果，但是IE8及以下版本不支援background-size，於是我們嘗試使用微軟的濾鏡效果，但是IE6不支援，畢竟還有一些後進生在使用IE6。另一種解決方案是使用jQuery，完全解決瀏覽器的相容性問題，還是jQuery威武。
CSS解決方案
我們準備一張背景圖片，任意尺寸的，假設我們要做一個登入頁面，頁面中使用拉升的背景圖。我們只需要在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實現了背景圖片的展開效果，但是要相容IE7,IE8就需要使用濾鏡filter來實現，注意該方案中，必須指定容器的高度，本例中指定了height:900px。
CSS方案有一定的局限性，必須指定容器高度，IE6不相容，那麼比較完美的解決方案就是使用jQuery了。
jQuery解決方案
我們使用jQuery先向body中動態插入一個DIV，並且該DIV中包含一張圖片，也就是我們要求展開效果的背景圖片。然後使用jQuery擷取瀏覽器視窗的大小，根據瀏覽器視窗大小，動態設定背景圖片的尺寸（寬和高）。

$(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()函數就是動態設定了背景圖片的尺寸，通過jQuery的append方法動態加入背景圖片，當頁面載入完成時已經瀏覽器視窗變化時都能實現背景圖片的展開效果，也就是頁面ready和resize都調用了cover()函數。

以上兩種解決方案，是否都很滿意？我比較喜歡jQuery解決方案，總之希望能幫到大家更好地掌握jQuery和CSS使背景圖片展開的技巧。