微信小程序使用背景图片

在开发微信小程序时，发现background-image不能使用本地图片进行设置背景图片。这时我们要怎么设置背景图片呢？

我们可以使用image标签，给他加上z-index属性，给image设置z-index为负数或者给盒子里的文字设置z-index为正数。

.coupon-bg{
    position: absolute;
    width: 638rpx;
    height: 176rpx;
    border-radius: 20rpx;
    /* z-index: -99; */
}
.card-left,.card-right{
    margin: 10rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 2;
}

<view class="card" wx:for="{{item.coupon}}" wx:key="couponId">
                    <image class="coupon-bg" src="../../static/coupon-bg.png" />
                    <view class="card-left">
                        <view class="tag">棋牌</view>
                        <view class="time">
                            <view style="font-size:48rpx;font-weight: 600;">
                                {{item.deductionTime*60}}
                            </view>
                            分钟
                        </view>
                        <view>抵时卡</view>
                    </view>
                    <view class="card-right">
                        <view class="right-top">
                            <view class="cardName">
                                <view style="font-size:32rpx;font-weight: 600;">
                                    {{item.couponName}}
                                </view>
                                <view style="font-size:24rpx;color:grey">
                                    有效时长:{{item.validTime}}
                                </view>
                            </view>
                            <view class="price">
                                <view>￥{{item.couponPrice}}</view>
                                <view data-obj="{{item}}" bindtap="buyCoupon" style="text-align: center;;background-color: rgb(255, 187, 0);width: 90rpx;height: 40rpx;border-radius: 40rpx;">
                                    购买
                                </view>
                            </view>
                        </view>
                        <view class="right-bottom">{{item.useInfo}}</view>
                    </view>
                </view>