html背景圖片自適應瀏覽器

迷霧綠洲發表於2016-10-26

在網頁中設定背景圖片最簡單的是直接設定圖片顯示的畫素大小,但是肯定不能滿足瀏覽的縮放顯示的。
<img src="path" width=200px>

後面在網上查到一種辦法

<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">    
<img src="pictures/background.jpg" height="100%" width="100%"/>    

利用z-index =-1 把圖片放到最後一層,防止文字被圖片覆蓋,在利用圖片的等比例拉伸去適應瀏覽器顯示畫素的變化。但是在實際的始終中還是有問題:
1.邊緣還是有白邊
2.存在沒有一直圖片拉伸,而將圖片重複了一次的情況。
最後採用了style 中position為fixed反而好了。

 <div id="Layer1" style="position:fixed; width:100%; height:100%; z-index:-1">    
<img src="pictures/background.jpg" height="100%" width="100%"/>    

後面為了不再每次都直接複製js程式碼,就在css 中定義樣式

bg{
positiong:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index=-1;
}
bg>img{
height:100%;
width:100%;
border:0;
}

在程式碼中呼叫:

<div id="bg"><img src='path'></div>

相關文章