学习记录：背景色+背景图混合模式

CSS background-blend-mode 属性（混合模式）

定义和用法：

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）

CSS语法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性说明：

值	描述
normal	默认值。设置正常的混合模式。
multiply	正片叠底模式。
screen	滤色模式。
overlay	叠加模式。
darken	变暗模式。
lighten	变亮模式。
color-dodge	颜色减淡模式。
saturation	饱和度模式。
color	颜色模式。
luminosity	亮度模式。

示例：

很多时候我们在做后台管理项目的时候，顶部的导航栏会需要一些背景色或者背景图。

我们先创建一个基本的顶部导航栏：

<template>
  <div class="xxx">
    <div class="test">
      <div class="left">
        <img src="@/assert/login/logo@2x.png" style="width:50px;margin-right:10px" alt="" />
        XXX应用平台
      </div>
      <div ref="topMenu" class="topMenu">
        <div v-for="(item,index) in items" :key="index" class="topitemmenu" :class="{ 'check': checkedId===item.id }">
          <i :class="item.source"></i>
          <span>{{"操作平台"+(index+1)}}</span>
        </div>
      </div>
      <div class="right">
        <span style="margin-right: 10px;">XXX中心</span>
        <img src="@/assert/menu/change.png" alt="" />
      </div>
    </div>
  </div>
</template>

写上基本样式：

<style lang='scss' scoped>
.xxx {
  height: 100%;
  display: flex;
  align-items: center;
}
.test {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1600px;
  height: 64px;
  color: #fff;
  font-size: 24px;
  padding: 0 10px;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    display: flex;
    align-items: center;
  }
  .topMenu {
    display: flex;
    .topitemmenu {
      padding: 0 20px;
      height: 64px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: white;
    }
    i {
      flex: 1;
      line-height: 32px;
      font-size: 16px;
      text-align: center;
    }
    span {
      flex: 1;
      line-height: 24px;
      font-size: 16px;
    }
  }
}
.check {
  background-color: rgba(17, 35, 94, 0.5);
}
.topitemmenu:hover {
  cursor: pointer;
  background-color: rgba(17, 35, 94, 0.2);
}

</style>

此时我们设置一个单独的背景色：

.test{
  background-color: #4561bd;
}

是不是感觉有点单调，这时我们想到把背景色换成背景图：

.test{
  background: url('~@/assert/menu/topBg.png') no-repeat;
  background-size: cover;
}

好了很多，那么用上面的混合模式试试效果（渐变色+背景图）：

.test {
  background: linear-gradient(to right, #489ef2, #4561bd),
    url('~@/assert/menu/topBg.png') no-repeat;
  box-sizing: border-box;
  background-size: cover;
  background-blend-mode: lighten;
}

只能说效果很好，这里选择的是background-blend-mode: lighten模式，有兴趣的可以自己去试试其他几个模式的效果~~

这次记录就到这啦~~