1.图片自适应填满整个屏幕
就是用背景图做的话,我想让这个图发生定位,但是还想让他们宽高100%
设置除static定位外,top:0,left:0,right:0,bottom:0
这个作用是;让明确宽高的盒子垂直水平居中,让无宽高的盒子填满父容器
效果如下:
代码如下:
html
<div id="text-center">
<div id="content">
<ul>
<li class='li0'>
</li>
</ul>
</div>
</div>
css
*{
margin: 0;
padding: 0;
}
html,body,#text-center,#content,ul{
width: 100%;
height: 100%;
}
ul{
background:url(./../showimg/redBgc.png);/*填满缝隙*/
position: relative;
}
li{
list-style: none;
position: absolute;
}
/*主要代码*/
.li0{
background: url(./../showimg/fm.png) no-repeat top;
background-size: contain;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}