<div class="bg_box" id="bg_box" style="width: 100%;position:absolute;top: 0;z-index: -1;">
<div class="bg1"></div>
<div class="bg2"></div>
</div>
body {
width: 100%;
height: 100vh;
background-color: #fefdfd;
overflow: hidden;
}
.bg1 {
width: 100%;
background: url(../images/login_banner_02.png) center center/100% 100% no-repeat;
height: 5.04rem;
position: absolute;
top: 0;
z-index: -1;
}
.bg2 {
height: 7.88rem;
position: absolute;
bottom: 0;
z-index: -1;
width: 100%;
background: url(../images/login_banner_01.png) center center/100% 100% no-repeat;
}
<script>
$(function () {
var height = document.documentElement.clientHeight
$("#bg_box").height(height)
})
</script>
键盘弹出时,body,html的高度由原来的100% 变成了 100%-键盘高度,所以bg2 会上移。
解决办法是给bg1 和 bg2 盒子套一个父级,绝对定位,将它的高度设置为视口高度。