图片平铺有两种方式，直接写img标签或者通过background-image方式
1，img标签
HTML：
<code><div class="row">
</div>
</code>
CSS:
<code>
.row{
margin:0,auto;
width:100%;
}
img{
width:100%;
height:100%;
margin: 0 auto;
display: block;
font-size: 0;
}
</code>
这样写的话，三张图片能够垂直平铺，且随着浏览器的缩放而缩放，可以添加alt关于图片的描述，利于SEO，且写法方便，不用考虑兼容性
2，background-image方式
HTML:
<code><div class="layout">
<div class="header"></div>
<div class="body-bg"></div>
<div class=" lianxi"></div>
</div>
</code>
CSS:
<code>.layout{
position: relative;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
}
.header{
background-size: cover;
background-image: url("img/header@2x.png");
padding-top: 11.875%;
}
</code>
在上面样式中，layout表示居中，最大宽度为640px，最小为320px，常用在手机端，
在header中设置padding-top: 11.875%;表示的是图片的高度和宽度比例
工作中遇到的问题
1，当设置一张图片向上移动且想覆盖上一张图片一部分，那么要绝对定位一下，且使用top，或者bottom的时候，虽然图片能上移下移但是上移后底部的空间还是要占据，这时候要使用margin-top：-n%；使用百分比是相对外层有定位的元素，而且能够随着浏览器缩放大概位置不变。
2，活动页面背景图宽度写死的方法
最外层div设置最大宽度和最小宽度，居中，且写背景色，或者在body写背景色，第二层div设置背景图，居中，最大宽度定死
HTML:
<code><body><div class="bg"><div class="img"></div></div></body>
</code>
CSS:
<code>
body{
padding: 0;
margin: 0;
}
.bg{
margin: 0 auto;
max-width: 320px;
}
.img{
background-position: center;
height: 210px;
background: url("body-bg@2x.png");
background-size: 100% 100%;
}
</code>
3，在写手机端页面的时候有事设计稿高度不够，此时为了自适应满屏，需要在HTML和body中设置高度100%
网友评论