移动端键盘弹出时候，导致body高度变低，背景图上移

  <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 盒子套一个父级，绝对定位，将它的高度设置为视口高度。