微信小程序 iphoneX 下背景图和按钮重叠问题？

Question

微信小程序中iphonex下背景图拉长了，按钮与之重叠，改如何解决？iphone6下正常。

][1]

代码

<view class="container">
    <button class="btn">选择你的技能</button>
    <view class="bg">
      <image src="{{image_src}}"></image>
    </view>
</view>

.bg {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 100%;
  z-index: -10;
 }
 .bg image {
  width: 100%;
  height: 100%;
 } 
.btn{
  width:400rpx;
  margin-top:100%;
  background-color: rgb(202, 99, 99);
  border-radius:100rpx;
  color:white;
}

Answer 1

一般不会利用背景和dom元素来做对应关系的处理，不然的话背景在不同的分辨率下面显示的一些位置不同，导致对应的相对位置关系不正确了，可以改成图片和按钮来处理吧

Answer 2

你的需求如果是背景永远铺满的话，就需要动态设置图片的bottom，需要bottom在各个手机都合适才可以，你可以使用rem等方式。