CSS-文本设置为其他颜色（多种颜色）时的颜色

Question

我想要一些文本，当它在红色上方时，它变为白色，而当它在灰色上方时，它变为黑色。此图显示了我想要实现的目标。文本可能会超过一行。

更新：通过使用以下代码设置渐变文字颜色，我设法使其正常工作：

  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 50%,
    #000000 50%,
    #000000 100%
  );

Answer 1

#red{
background-color:red;
color:white;
}
#grey{
background-color:grey;
color:black;
}

<span id="red">this is my table</span><span id="grey">for students</span>