对单个文本使用两种文本颜色，例如基于背景色的遮罩

Question

用所有浏览器都支持的背景进行文本蒙版/剪切的最佳方法是什么？正如您在Codepen中看到的那样，我试图将文本颜色仅在红色框所在的位置设置为白色，而文本的其余部分将变为黑色。您能否告诉我，哪种效果最好的方法是所有浏览器都可以支持的。我制作了一个模型并附加了它以便更好地理解。

预先感谢。

<div class="head">AWESOME TEST</div>
<div class="box"></div> 

https://codepen.io/bootstrap007/pen/mdeYaeX

Answer 1

您可以使用mix-blend-mode。在此处查看所有不同的attributes，然后查看最适合您的需求的一个。 Here is an example