css控制背景图片随div的大小而缩放

在网页布局时我们经常会遇到这样的问题：图片的分辨率是1024*768，在1024*748的屏幕上能显示完整，一旦在800*600的屏幕上是就显示不完整，为了让图片的大小能适应不同的分辨率，可以这样来设置背景：

原：

<div style="width:200px; height:200px; background:url( 图片路径)"></div> 

改： 

<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%是解决问题的关键；