HTML文字在图片上显示

需求来源

常见的电商平台、为吸引用户都会派券，会有个入口展示优惠券状态(是未使用、还是已使用、还是已过期);
针对过期的优惠券、一般会打个过期icon上去标示该券的状态, UI要求优惠券名称在标签的上面.
=> 转化成需求点: 文字盖在图片上面;

你以为的

// wxml
  <view class="coupon-item flex-row">
    <view class="left flex-row">优惠券金额&可用券门槛</view>
    <view class="right flex-col">
      <text class="coupon-name">我是很长很长很长的优惠券名称</text>
      <text class="coupon-tips">我是该优惠券的使用说明</text>
    </view>
    <!-- 已领取icon -->
    <view class="item-label">
      <image src="../../received.jpeg"/>
    </view>
  </view>

// wxss
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.coupon-item {
  width: 464rpx;
  height: 128rpx;
  background: #eeeeee;
  border-radius: 8rpx;
  position: relative;
  font-size: 22rpx;
  overflow: hidden;
}
.left {
  width: 150rpx;
  height: 100%;
  border-right: 1px solid red;
}
.right {
  height: 100%;
  margin-left: 24rpx;
  font-size: 24rpx;
  flex: 1;
}
.coupon-name {
  font-size: 28rpx;
  color: #2c2c2c;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.coupon-tips {
  color: #666666;
}
.item-label {
  width: 56rpx;
  height: 56rpx;
  position: absolute;
  top: 0;
  right: 0;
}
.item-label image {
  width: 100%;
  height: 100%;
}

先看看效果图：你会发现图片盖在了文字的上面、这肯定不是我们期望的, 那么我们看看怎么改造下？

实现方案1

将image跟文字块放在同一个div中、通过设置他们之间的位置及层级

在.coupon-name类中追加z-index调高文本的层级
.coupon-name {
  z-index: 999; // 高于券icon的优先级即可
}

实现方案2

将image作为背景图片, 即background: url(...)

// wxml
<view class="coupon-item flex-row">
<view class="left flex-row">优惠券金额&可用券门槛</view>
<view class="right flex-col">
  <text class="coupon-name">我是很长很长很长的优惠券名称</text>
  <text class="coupon-tips">我是该优惠券的使用说明</text>
</view>
</view>

// wxss
// 仅需要修改coupon-item类即可;
// 新增
.coupon-item {
  background: #eeeeee url(../../received.jpeg) no-repeat; 
  background-size: 56rpx 56rpx;
  background-position: right top;
}

最后看看实现效果图:

写在最后

若有错误之处, 恳请留言, 定会及时更正!
若觉着对您有帮助的话恳请点个赞或着收藏吧!