背景图片自适应 

<body style="background-color:#d43167">
     <div style="position: absolute;z-index: -1; top:0px; left:0px;width: 100%; " ><img src="img/bg.png " width="100%" height="100%"/></div>
     <div style="position: absolute;z-index: 1;width: 80%;margin-top: 10%; left:10%"><img src="img/logo2.png" width="100%" height="100%" /></div>
</body>

之前看见在div里面用了height：100%的，但是要注意的是：如果父级没有设置高度这个属性是用不上的，这时候如果你div里面又没有放东西，是没有显示效果的，只会显示背景色：




所以要解决这个问题（不用js方法的话），一是：可以事先设置好父级的高度，二是：在里面放足够的元素；撑起div的高，再用合适的margin；padding；元素的height撑到自己想要的高度，如果不想用px设置，可以用百度比设置如：margin-top：10%；

在用百分比让元素居中的方法：position：absolute：top：50%；margin-top:-(元素高度)/2；left：50%；margin-left:-(元素宽度)/2；
posted @ 2016-02-02 15:43  简简和单单  阅读(502)  评论(0)  编辑  收藏  举报