mix-blend-mode 利用混合模式让文字智能适配背景颜色

原创

白雾茫茫丶

发布于 2024-05-22 16:59:19

1570

发布于 2024-05-22 16:59:19

文章被收录于专栏：前端开发

今天向大家推荐一个 CSS3 属性：mix-blend-mode，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合模式。

文字智能适配背景颜色

这个效果就是在黑色背景中显示白色文字，在白色背景中显示黑色文字，而且是自动的：

<style>
    .main {
      width: 600px;
      height: 200px;
      background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
      position: relative;
      margin: 100px auto;
    }

    .main::before {
      content: '白雾茫茫丶';
      position: absolute;
      font-size: 50px;
      width: 100%;
      height: 100%;
      top: 40%;
      left: 20%;
      color: #fff;
      mix-blend-mode: difference;
      animation: move 3s infinite linear alternate;
    }

    @keyframes move {
      0% {
        transform: translateX(20%);
      }

      100% {
        transform: translateX(-20%);
      }
    }
  </style>
  <div class="main"></div>

我们可以发现，代码非常简单，关键是这个属性：mix-blend-mode: difference

这是为什么呢？经过一番资料查阅，设置了这个属性后，它是这样计算的：

  黑底白字：
  当前颜色：    255  255  255
  父元素：       0    0    0
  混合后的颜色：255   255  255

  白底黑字：
  当前颜色：    255  255  255
  父元素：      255  255  255
  混合后的颜色： 0    0    0

由此可以得出结论：混合后的颜色 = 当前颜色 - 父元素背景色

实现文字镂空效果

<style>
  .parent {
    background-image: url("./images/1.jpg");
    width: 600px;
    height: 400px;
    position: relative;
    margin: 100px auto;
  }

  .parent .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 900;
    font-size: 50px;
    color: #000;
    background-color: #fff;
    mix-blend-mode: screen;
  }
</style>
<div class="parent">
  <div class="child">白雾茫茫丶</div>
</div>

mix-blend-mode 其他属性

属性值	描述
normal	默认值，没有混合效果
multiply	正片叠底
screen	滤色
overlay	叠加
darken	变暗
lighten	变亮
color-dodge	颜色减淡
color-burn	颜色加深
hard-light	强光
soft-light	柔光
difference	差值
exclusion	排除
hue	色相
color	颜色
saturation	饱和度
luminosity	亮度