图片背景自适应:
.body_bg{width:100%; height:100%; background: url(../image/bg.jpg) no-repeat; background-size: cover;background-position: center;}
带图片与文字的水平居中
.input_block img{vertical-align:middle; width:20px; padding-left: 10px;}
.input_block span{
padding-right: 10px;color: #423a33; font-family: cursive; font-size: 16px; display: inline;
height:100%;
vertical-align:middle;
line-height: 35px;
}
自定义弹出框 拼接
.sys_dialog{top:30%; left:10%;width:80%; position:fixed}
.sys_dialog .top img{ width:100%;vertical-align:bottom;}
.sys_dialog .middle{background: url('../image/diglogmiddle.png') repeat-y ;background-size: contain; height:auto; }
.sys_dialog .bottom img{ width:100% }
<div class="sys_dialog">
<div class="top">
<img src="../image/diglogtop.png">
</div>
<div class="middle">
</div>
<div class="bottom">
<img src="../image/dialogbottom.png">
</div>
</div>
移动端添加:active 效果
document.body.addEventListener('touchstart', function () { });
.active:active{
transform: scale(0.8);
}