在开发微信小程序时,发现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>