小程序背景图固定以及标题栏遮挡内容滚动时显示内容

滚动页面时背景图固定：

采用一张图片作为背景图，通过设置position为fixed以及z-index为-1，目的是为了让它在最底层。

<!-- 背景图 -->
<view>
    <image class="bg-image" mode="scaleToFill" src="/img/bg2.png"></image>
</view>

.bg-image {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

标题栏背景固定并且处于更高层

只需要通过获取标题栏的宽度和高度，然后进行剪切
获取高度和宽度：

wxml:
<!-- 为了和背景图一样，需要使用的图片还是背景图以及层次需要比背景图更高，不过要低于标题栏的块的层次 -->
<view>
    <image class="top-bg-image" mode="scaleToFill" src="/img/bg2.png" style="clip: rect(0, {{top_width}}px,{{top_height-12}}px, 0)"></image>
</view>
<!-- 标题栏宽度和高度 -->
<view id='top' class="top" style="padding-top: {{statusHeight+10}}px;">
    <view class="head">
        <view class="btn-arrowhead" bindtap="Return"></view>
        <view class="title"> 注册(学生端)</view>
    </view>
</view>

js:
  getTopHeight: function() {
        let that = this;//注意要将this用that来代替
//selectAll(元素选择器)
       wx.createSelectorQuery().selectAll('#top').boundingClientRect(function(rect) {
            that.setData({
                top_height: rect[0].height,
                top_width: rect[0].width,
            });
            console.log("高度是：", that.data.top_height);
        }).exec();
    },