背景图片占全屏幕高度

版权声明：正在学习中，有错误欢迎指出。感谢比❤❤~ https://blog.csdn.net/gx17864373822/article/details/81292732

index.wxml

 <view class="first">
    <image src="bm_bg.jpg" class="bg-image" mode="scaleTofill"></image>
    <image src="bm_btn.jpg" class="button-image" mode="widthFix"></image>
    <view class='content'>
      文字
    </view>
  </view>
  <view>
     222
  </view>

index.wxss

page {
  width: 100%;
  height: 100%;
}
.first {
  width: 100%;
  height: 100%;
  /* position: absolute; */
}
.bg-image {
  display: block;
  width: 100%;
  height: 90%;
  /* background-color: rgba(0, 0, 0, 0.2); */
}
.button-image{
  display: block;
  width: 100%;
  /* height: 20%; */
}
.content {
  position: positive;
  /* top: 60%; */
  margin-top: -500rpx;
}

---

叮叮当~今天测试在大手机上回错位啊喂！所以不能用margin-top来调位置。
整体思路：外层父元素为relative定位，内部内容用abosulte定位，然后用top和left来调位置

<view class='first'>
    <!-- 背景图片 -->
    <image src='../../images/bm_bg.jpg' mode='scaleTofill' class='background'></image>
    <view class='content'>

  </view>
</view>

.first {
  width: 100%;
  height: 90%;
  position: relative;
}

.first .content {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 9%;
}