码迷,mamicode.com
首页 > 其他好文 > 详细

背景图片自适应

时间:2016-02-02 16:19:42      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

<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;

背景图片自适应

标签:

原文地址:http://www.cnblogs.com/wangrongxiang/p/5177717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!