CSS - Text set colour when over other colour (multiple colours)

Question

I would like to have some text that when it is over red, it changes to white, and when over grey, it changes to black. This image shows what I want to achieve. The text may go over onto more than one line.

UPDATE: I managed to get it working by using this code to set a gradient text colour:

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

Don't post an answer in the question, post it as a self answer. — Asons, Nov 08 '18 at 08:31

score 0 · Answer 1 · answered Nov 06 '18 at 20:25

0

#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>

answered Nov 06 '18 at 20:25

NFTtray

75
10

Thanks you! This really helped. – Benjamin Sommer Nov 06 '18 at 20:29
@marmadukeandbob are you sure this is really what you want? this is basically simple and trivial coloration using CSS – Temani Afif Nov 06 '18 at 20:31
It is kind of what I want but I was looking to basically have the left half of a div one color and the other half another. Even if the mid line splits words – Benjamin Sommer Nov 06 '18 at 20:35
I mentioned to you in a previous comment that just drop in some code is not a good answer. Please have a second look at [answer]. – Asons Nov 08 '18 at 08:38

CSS - Text set colour when over other colour (multiple colours)

1 Answers1