CSS 實現背景圖尺寸不隨瀏覽器縮放而變化

<!-- Author:博客園小dee -->

一些網站的首頁背景圖尺寸不隨瀏覽器縮放而變化，例如百度個人版的首頁，縮放后背景圖的尺寸並不改變：

再比如花瓣網( http://www.huaban.com )：

 這樣做的好處是，比如當你在1024*768px分辨率的屏幕上看到完整的背景，再換至1280*800px分辨率的顯示器瀏覽，不會出現背景不能充滿屏幕的情況。換句話說，就是在各個分辨率的顯示器下都能看到充滿屏幕的背景圖。

現在用CSS來實現這一效果。

首先需要一張足夠大尺寸的圖片，上圖百度背景圖的尺寸為1600*1000px( 圖片地址：http://4.su.bdimg.com/skin/12.jpg?2 )；花瓣背景圖的尺寸為1600*1600px( 圖片地址：http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg )；

然后有兩種方法可以達到背景圖不縮放的效果：

方法一. 把圖片作為background( 如百度和花瓣 )

有幾個CSS的屬性要提一下：background-size：cover，這個CSS3的屬性作用是把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域，背景圖像的某些部分也許無法顯示在背景定位區域中，如果不使用這個屬性，在IE11和FireFox中縮放瀏覽器，背景圖片會隨之縮小，同時使用-webkit-background-size: cover和-o-background-size: cover兼容webkit內核瀏覽器和Opera瀏覽器；background-attachment屬性設置背景圖像是否固定或者隨着頁面的其余部分滾動，當設置為fixed時頁面的其余部分滾動時，背景圖像不會移動。

 

代碼( 用了百度的星空圖，效果和上面百度的截圖一至 )：

HTML：

<div id="con"></div>

CSS：

body{ margin:0; padding:0;}
#con{ 

    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-image:url("maskimg/star.jpg"); 
    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    -webkit-background-size: cover;/* 兼容Webkit內核瀏覽器如Chrome和Safari */
    -o-background-size: cover;/* 兼容Opera */
    zoom: 1;    
}

 

方法二.不把圖片作為背景，而是使用<img>標簽。輕博客LOFTER( http://www.lofter.com/ )使用的是這種方法：

圖片的尺寸是1368*906px( 圖片地址：http://imgcdn.ph.126.net/czn-UyCIDqKOQbNknCSbpg==/3750935539746209461.jpg)。

使用這種方法往往是因為圖片不是作為整個body的背景，頁面中還有其他不以這張圖片為背景的元素。

它實現的效果是圖片尺寸不會隨瀏覽器縮放而變化，但是如果有豎直滾動條時，圖片不會固定而會隨滾動條移動。只需要把圖片的寬度width設置成100%就行了。

代碼很簡單，只有幾行，用的還是百度的星空圖：

HTML：

<div id="con"><img id="pic" src="maskimg/star.jpg"></div>

CSS：

body{ margin:0; padding:0;}
#pic{ width:100%;}

 至此功能完成。

 

作者： 小dee

出處： http://www.cnblogs.com/dee0912/

說明：作者寫博目的是記錄開發過程，積累經驗，便於以后工作參考。
如需轉載，請在文章頁面保留此說明並且給出原文鏈接。謝謝！