CSS：background-blend-mode 属性实现同时设置背景颜色和背景图片叠加在一起显示

1.场景

下面有两张卡片，每张卡片上有文字描述以及背景图，从背景可以看出是渐变色和 logo 图片的结合。实现下面这两张卡片样式，一般都会想到让 UI 直接给出去掉文字背景的切图，这样也没毛病，那还有没有其它方法呢？

2.实现方案

上面卡片中除了图片我们很难实现出来，只能通过切图实现外，其它的都可以通过代码实现。我们可以将背景拆分出颜色和图片两部分，然后分别实现，而不是整体的切图，只需要让 UI 给出上述卡片中的对勾和感叹号切图，这样也能缩减切图的大小，再用渐变背景色和背景图片叠加起来显示即可。
注：因为使用到渐变色，所以要结合 background-blend-mode 属性来实现与背景图片叠加显示，否则只通过 background: linear-gradient(); background-image: url(); 设置不会生效，这样只能显示图片。

图标切图1：
图标切图2：

注：这里是 React 项目中的代码实现，有用到 CSS Modules 技术。
HTML代码如下：

			<ul>
              <li className={styles.card1}>
                <h3>能力说明</h3>
                <p>
                  <span className={styles.circle}></span>由 WPS AI
                  提供的模型能力，包括知识搜索、内容创作、智能对话等功能
                </p>
                <p>
                  <span className={styles.circle}></span>
                  能记住用户近段时间的提问内容，支持用户进行追踪提问
                </p>
                <p>
                  <span className={styles.circle}></span>
                  对于一些恶意的、敏感性的问题，能自动识别，并拒绝回复
                </p>
              </li>
              <li className={styles.card2}>
                <h3>对话局限</h3>
                <p>
                  <span className={styles.circle}></span>
                  在一些特定场景下，可能会产生错误的回答，回答正确度需用户自行判断
                </p>
                <p>
                  <span className={styles.circle}></span>
                  偶尔会出现模型性能问题，可能会出现加载超时、回复加班等问题
                </p>
                <p>
                  <span className={styles.circle}></span>
                  模型的训练集是有限的且是逐步补充的，对最新出现的事件可能认知有限
                </p>
              </li>
            </ul>

CSS代码如下：

	.card1,
    .card2 {
      display: inline-block;
      max-width: 612px;
      padding: 24px 36px 32px;
      // ---------渐变背景色和背景图片叠加显示处理（start）---------
      background-position: right bottom;
      background-repeat: no-repeat;
      background-image: linear-gradient(101.59deg, #F0FBFF 0%, #E1F7FF 58.51%), url('./images/tick.svg');
      background-blend-mode: color-burn;
      // ---------渐变背景色和背景图片叠加显示处理（end）---------
      border-radius: 12px;
      text-align: left;
      font-size: 16px;
      line-height: 24px;
      color: rgba(13, 13, 13, 0.66);

      .circle {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 10px;
        background: #00BEFF;
        border-radius: 50%;
      }

      p {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(13, 13, 13, 0.66);
      }

      >p:not(:last-child) {
        margin-bottom: 10px;
      }
    }

    .card2 {
      // ---------渐变背景色和背景图片叠加显示处理（start）---------
      background:
        linear-gradient(101.59deg, #FDF9F0 0%, #FDF3E1 58.51%)
        /*渐变背景色*/
        , url("./images/sigh.svg")
        /*图片背景*/
        no-repeat;
      background-position: right bottom;
      background-blend-mode: color-burn;
      // ---------渐变背景色和背景图片叠加显示处理（end）---------
    }

上面设置渐变色背景和背景图片核心代码只有这几行：

	  background:
        linear-gradient(101.59deg, #FDF9F0 0%, #FDF3E1 58.51%)
        /*渐变背景色*/
        , url("./images/sigh.svg")
        /*图片背景*/
        no-repeat;
      background-position: right bottom; // 背景图片位置
      background-blend-mode: color-burn; // 背景层的混合模式

也可以用这种写法：

      background-image: linear-gradient(101.59deg, #F0FBFF 0%, #E1F7FF 58.51%), url('./images/tick.svg');
      background-repeat: no-repeat;
      background-position: right bottom;
      background-blend-mode: color-burn;

需要注意的几点：

1. 如果背景色不是渐变色，可以直接使用background-color: ; background-image: url();

2. background-blend-mode 具体取什么值，可以再浏览器控制台调试该属性，找到符合 UI 设计稿的样式值即可。

3. background-blend-mode 属性定义了元素背景层的混合模式（background-image图片与background-color颜色）。

background-blend-mode 常见属性值如下所示：