css3 实现背景渐变色与背景图片并存效果

先看效果
背景是渐变色+浅色透明图案组成，UI没有完全切成一张图，刚好试试看能不能使用 背景渐变+图片的效果。

对兼容性要求高的不要这样做，直接叫UI切合成一张完整的背景图

html代码

<view class="item-card">
    <view class="item-card_t">
         <text class="item-card__name">{{
             item.cardName
         }}</text>
         <view class="item-card-r">
             <text class="item-card-r__remain_text"
                 >余额</text
             >
             <text class="item-card-r__remain"
                 >{{ item.remainMoney
                 }}{{ currencyText }}</text
             >
         </view>
     </view>
     <view class="item-card_b">
         <text class="item-card_b__name"></text>
         <text class="item-card_b__privilege">{{
             item.privilege
         }}</text>
     </view>
 </view>

scss代码

 .item-card {
    /*主要是这一段图片背景代码，$开头的字符串是scss变量，需要改成实际的值，或者定义变量*/
    background: linear-gradient(
          120deg,
          rgba(255, 106, 103, 1) 0%,
          rgba(225, 68, 65, 1) 100%
      );
      background-image: url('../../static/img/bg_card.png');
      background-position: center;
      background-repeat: no-repeat;
      background-color: $bg-color-card;
      box-shadow: 0px 12px 28px rgba(232, 92, 82, 0.15);
      border-radius: 8px;
      color: $font-color-reverse;
      padding: 24upx 36upx 20upx 40upx;
      &_t {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding-bottom: 6upx;
      }
      &__name {
          font-size: $font-lgs;
      }
      &-r {
          &__remain_text {
              font-size: $font-lg;
          }
          &__remain {
              font-size: $font-lgs;
              font-weight: bold;
          }
      }
      &_b {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          &__privilege {
              font-size: $font-sm;
              color: $font-color-jubilant;
          }
      }
  }