首页 前端知识 CSS:background-blend-mode 属性实现同时设置背景颜色和背景图片叠加在一起显示

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

2024-04-29 12:04:00 前端知识 前端哥 599 560 我要收藏

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 常见属性值如下所示:

描述
normal默认值。设置正常的混合模式。
multiply正片叠底模式。
screen滤色模式。
overlay叠加模式。
darken变暗模式。
lighten变亮模式。
color-dodge颜色减淡模式。
saturation饱和度模式。
color颜色模式。
luminosity亮度模式。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6582.html
标签
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!