前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >mix-blend-mode 利用混合模式让文字智能适配背景颜色

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

原创
作者头像
白雾茫茫丶
发布2024-05-22 16:59:19
850
发布2024-05-22 16:59:19
举报
文章被收录于专栏:前端开发前端开发

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

文字智能适配背景颜色

  1. 这个效果就是在黑色背景中显示白色文字,在白色背景中显示黑色文字,而且是自动的:
代码语言:html
复制
<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

  1. 这是为什么呢?经过一番资料查阅,设置了这个属性后,它是这样计算的:
代码语言:txt
复制
  黑底白字:
  当前颜色:    255  255  255
  父元素:       0    0    0
  混合后的颜色:255   255  255

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

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

实现文字镂空效果

代码语言:HTML
复制
<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

亮度

其它属性的效果,有兴趣的伙伴可以研究一下!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文字智能适配背景颜色
  • 实现文字镂空效果
  • mix-blend-mode 其他属性
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档