CSS 文字反色的研究

在之前我们使用 Canvas 去计算颜色和反色，之后经过大佬提醒，原来 CSS 本身也是能根据背景色取反显示的。在这里，我们会学习一个新的特征：mix-blend-mode。

引用 MDN 的介绍：

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

它的属性值很多，需要反色，我们重点使用的是 difference 或者 exclusion，实际上两个都能起到反色效果，只是似乎对比度不太一样。

See the Pen text/ background contrast with mix-blend-mode #1 by Ana Tudor (@thebabydino) on CodePen.

但是我们会发现，反色太为花哨，有的时候不是我们所需要的效果，我们想要灰度一下，加上 filter: grayscale 却并不生效。

See the Pen text/ background contrast with mix-blend-mode #3 by SkyAo (@csvwolf) on CodePen.

之后我们就换了一种方法：

h2 {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: invert(1) grayscale(1) contrast(9);
}

可以看下预览效果：

See the Pen text/ background contrast with mix-blend-mode #3 by SkyAo (@csvwolf) on CodePen.

这种方法需要注意的事项是，从 background 到需要生效的节点如果并非直接父子节点的关系，那么需要再每一层中默认：background: inherit，否则不生效。

另一方面，考虑到它会自动将字的每一个部分反色，从设计的角度，感觉更加适合一些艺术字，而不适合普通的文本。

当然，这也只是一次简单的探索，具体的应用场景还得看设计师的需求 :doggy。

参考资料：

• Methods for Contrasting Text Against Backgrounds - CSS Tricks