CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法

標籤：滾動   作用   img   兩種   osi   -o   無法   opera   背景映像   

方法一. 把圖片作為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>標籤，效果是圖片尺寸不會隨瀏覽器縮放而變化，但是如果有豎直捲軸時，圖片不會固定而會隨捲軸移動。只需要把圖片的寬度width設定成100%就行了。 

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


HTML： 

 代碼如下:
<div id="con"><img id="pic" src="maskimg/star.jpg"></div> _fcksavedurl=""maskimg/star.jpg"></div>" 

CSS： 

 代碼如下:
body{ margin:0; padding:0;} #pic{ width:100%;}  

CSS實現背景圖尺寸不隨瀏覽器縮放而變化的兩種方法