Change Text Color after 50% height at 175deg

问题

I am changing background color after 50% height with 175deg angle.So, I want the text color to become white, when the background-color is blue. Fiddle

.bg {
      background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
      color:#000;
}

<div class="bg">
<h1>
 Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White
</h1>
  
</div>


</div>

回答1:

New answer:

Set the background of the h1 element using linear-gradient in the same shape, but the colors you want for the text. Than make the text color transparent, and use background-clip: text (note the browser's compatibility) to color the text.

.bg {
  background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
  color: #000;
}

h1 {
  color: transparent;
  background: linear-gradient(175deg, #435289 50%, white 50%);
  -webkit-background-clip: text;
  background-clip: text;
}

<div class="bg">
  <h1>
    Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White
  </h1>

</div>


</div>

Original answer:

If you need the contrast, and not the exact colors, you can use mix-blend-mode to dynamically change the color according to the background:

.bg {
  background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
  color: #000;
}

h1 {
  color: #fff;
  mix-blend-mode: difference;
}

<div class="bg">
  <h1>
    Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White
  </h1>

</div>


</div>

回答2:

you can specifically apply that color. see https://jsfiddle.net/h7jhcbm0/2/

.bg {
  background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
  color: #000;
}

h3 {
  color: #fff
}

来源：https://stackoverflow.com/questions/44522300/change-text-color-after-50-height-at-175deg

标签

javascript

css

css3

css-transitions