自适应大小的背景图片
相信很多前端会遇到这个问题：要做一个尺寸自适应的页面，其中某个容器的背景图也需要跟着容器的尺寸一起改变。如果背景是有规律的纯色或者渐变还好办，直接平铺即可。但如果背景是要求完全显示的一张完整的图片呢，我们使用background-image这个属性是没办法达到我们的要求的，因为背景图的大小是不会随着容器改变的。
如此我们就要考虑能达到我们要求的元素了，用img元素能够实现尺寸的适应：
1 <div style="width:200px;height:200px;"> 2 <img style ="width:100%;height:100%;" src="xxx.jpg" /> 3 </div>
这样一来，img的尺寸就能和容器div的尺寸相适应了。但如何在容器中装元素呢，毕竟图片是做背景而不是内容来用的。这里我们需要用一点作弊的方式来实现了：将容器的内容先转换为块级元素（如果它不是块级元素），然后使之浮动回到本来应该在的位置。
1 <div style="width:200px;height:200px;"> 2 <img style ="width:100%;height:100%;" src="xxx.jpg" /> 3 <span style="display:block;position:relative;margin-top:-200px;">内容</span> 4 </div>
如果父级的div的尺寸是动态不固定的，则浮动的margin-top值需要用js判断之后再做赋值。
这种方案其实也只是一种折中的办法，本人尚未找到纯css的解决方案，如果有更好方法，欢迎留言讨论，互相学习。
10-30更新：
css3中新特性可以完美解决上面问题：
background-image:url(/../);
background-size:100% 100%;
