圖片平鋪有兩種方式，直接寫img標簽或者通過background-image方式
1，img標簽
HTML：
<div class="row">
<img src=''/>
<img src=''/>
<img src=''/>
</div>
CSS:
.row{
margin:0,auto;
width:100%;
}
img{
width:100%;
height:100%;
margin: 0 auto;
display: block;
font-size: 0;
}
這樣寫的話，三張圖片能夠垂直平鋪，且隨著瀏覽器的縮放而縮放，可以添加alt關于圖片的描述，利于SEO，且寫法方便，不用考慮兼容性
2，background-image方式
HTML:
<div class="layout">
<div class="header"></div>
<div class="body-bg"></div>
<div class=" lianxi"></div>
</div>
CSS:
.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%;
}
在上面樣式中，layout表示居中，最大寬度為640px，最小為320px，常用在手機端，
在header中設置padding-top: 11.875%;表示的是圖片的高度和寬度比例
工作中遇到的問題
1，當設置一張圖片向上移動且想覆蓋上一張圖片一部分，那么要絕對定位一下，且使用top，或者bottom的時候，雖然圖片能上移下移但是上移后底部的空間還是要占據(jù)，這時候要使用margin-top：-n%；使用百分比是相對外層有定位的元素，而且能夠隨著瀏覽器縮放大概位置不變。
2，活動頁面背景圖寬度寫死的方法
最外層div設置最大寬度和最小寬度，居中，且寫背景色，或者在body寫背景色，第二層div設置背景圖，居中，最大寬度定死
HTML:
<body><div class="bg"><div class="img"></div></div></body>
CSS:
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%;
}
3，在寫手機端頁面的時候有事設計稿高度不夠，此時為了自適應滿屏，需要在HTML和body中設置高度100%
