html-css控制背景圖全屏拉伸不重復顯示

在HTML中，當我們設置背景圖，只能采用是否重疊、居中、重疊方向這幾個選項

CSS3中設置

body {  
    background:#3d71b8 url(../back_main.png);  
    background-size: 100%;  
    background-position:center;  
}  

但是background-siz是CSS 3的屬性，並不是所有的瀏覽器都支持。

 

 

CSS2中並沒有圖片全屏拉伸的屬性，只能想其他辦法。 
利用一個DIV層，在里面裝載一個IMG標簽。然后設置DIV和IMG的大小為100%，並固定到屏幕最底層，這樣就實現了完美的拉伸並最大化圖片的目的。 
首先在Body中加入下面的代碼：

<div id="div1"><img src="img.jpg" /></div> 

然后加入CSS代碼： 

div#div1{ 
position:fixed; 
top:0; 
left:0; 
bottom:0; 
right:0; 
z-index:-1; 
} 
div#div1 > img { 
height:100%; 
width:100%; 
border:0; 
} 

最終效果：

 

這樣，我們實現了固定居中且自動拉伸全屏的背景圖片，不過她是一個層，所以當用戶在頁面空白處右鍵的時候，顯示的就是圖片的信息，這可能會讓用戶感覺不方便。 
實際上，火狐的拉伸效果比IE強很多，會自動羽化圖片的細節。IE在圖像拉伸后的像素點非常難看，所以建議用高分辨的圖像作為背景。 

本文轉載，謝謝。