css控制背景圖片隨div的大小而縮放

在網頁布局時我們經常會遇到這樣的問題：圖片的解析度是1024*768，在1024*748的螢幕上能顯示完整，一旦在800*600的螢幕上是就顯示不完整，為了讓圖片的大小能適應不同的解析度，可以這樣來設定背景：

 

 

<div style="width:360px;height:200px;border:red 1px solid; margin-left:100px; margin-top:300px; position:relative; ">
<img style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-Index:-1; border:1px solid blue" src="包囊.png" />背景圖片的驗證
</div>

 

 

這裡需要提出幾點：

   1.<img/>的z-index為-1，其實也就相當於一個背景的設定；

   2.width height設為100%是解決問題的關鍵；