mix-blend-mode 属性

最新推荐文章于 2024-07-26 08:00:00 发布

gtLBTNq9mr3

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量888

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MzI2ODY0ODM2Ng==&mid=2247489373&idx=1&sn=79a5e4e4d01b04151d289faf6383e6ec&chksm=eaed3d9cdd9ab48a8db6b142b97db0606b12a477bb0efa6dc29e255bea6340f2c34ac7c46629&scene=126&&sessionid=0

版权

我现在有一个进度条，进度条中间有一串文字，当我的进度条覆盖了文字之后，文字要与进度条反色，怎么实现？

可以使用js的方案，在进度条宽度变化的时候，计算盖过每一个文字的50%，如果超过，设置文字相反颜色。

当然css也有对应的方案，也就是 mix-blend-mode 属性，该属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;


mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

mix-blend-mode: difference; 在“差值”模式中，查看每个通道中的颜色信息，“差值”模式是将从图像中“基色”颜色的亮度值减去“混合色”颜色的亮度值，如果结果为负，则取正值，产生反相效果。

<head>
  <style>
    .hello {
      color: #fff;
      background: #000;
    }
    .span {
      mix-blend-mode: difference;
    }
</style>
</head>
<body>
  <div class="hello">
    <span class="span">hello</span>
  </div>
</body>

在上面代码中，我们设置的字体颜色是白色和背景颜色是黑色，当把背景颜色改成白色的时候发现字体颜色自动变成黑色的了，产生反相效果。

浏览器兼容性如下：

gtLBTNq9mr3

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mix-blend-mode 属性

我现在有一个进度条，进度条中间有一串文字，当我的进度条覆盖了文字之后，文字要与进度条反色，怎么实现？可以使用js的方案，在进度条宽度变化的时候，计算盖过每一个文字的50%，如果超过，设置文...
复制链接

扫一扫