小编Tan*_*uki的帖子

我想要做的是创建将改变颜色的界面,具体取决于背景的颜色,使文本始终可读.到目前为止一切正常.我已经录制了我的浏览器以显示一个工作示例:

从我的研究中,我发现实现这一目标的最佳方法是使用mix-blend-mode: difference;.唯一的问题是,由于一些未知的原因,文字变得大胆.

最初我想提供演示但mix-blend-mode不在代码片段中工作.我不确定为什么,我看过其他人在演示中使用它,但对我来说,它用红色突出显示.

无论如何,这是一张图片(浏览器截图的部分内容):

如您所见,应用mix-blend-mode: difference;文本后显然更厚.也许这不是什么大不了的事,但当我将它应用于较小的文本时,它看起来非常糟糕.

我知道这是愚蠢的,但是当我试图在photoshop中重建相同的效果时,一切都很好,这意味着使用difference混合模式反转颜色可以正常工作.

我的问题是:一个人可以得到相同的结果,没有铭文变得更厚(？)或者它可能是这样的工作,我无能为力？

我不想将字体样式更改light为强制不同的外观.

编辑:好的,所以这是一个简单的例子 - 我不知道为什么,但这次它有效.上次mix-blend-mode: difference;在demo中根本没用,这就是为什么我用图像来描述我的问题.

总之,在文本左右侧是没有 mix-blend-mode: difference;,要能够看到其中的差别.奇怪的是白色版本mix-blend-mode: difference;似乎没有好看 - 我刚刚通过在黑色bg上添加版本来发现它.

* {
  margin: 0;
  padding: 0;
}
.white {
  background-color: #fff;
  width: 50%;
  position: absolute;
  left: 0;
  height: 100%;
}
.black {
  background-color: #000;
  width: 50%;
  position: absolute;
  right: 0;
  height: 100%;
}
.normalb {
  position: absolute;
  top: 50%;
  left: 5%; …