javascript - 在 175 度 50% 高度后更改文本颜色

Question

我在 50% 高度后以 175 度 Angular 更改背景颜色。因此，当背景颜色为蓝色时，我希望文本颜色变为白色。 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>

Answer 1

新答案:

使用相同形状的线性渐变设置 h1 元素的背景，但文本的颜色是您想要的。将文本颜色设为透明，然后使用 background-clip: text(注意 browser's compatibility )为文本着色。

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

原答案:

如果你需要对比度，而不是精确的颜色，你可以使用 mix-blend-mode根据背景动态改变颜色:

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