css3 實現背景漸變色與背景圖片並存效果

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;
          }
      }
  }