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

Question

我在 50% 高度和 175 度角后更改背景颜色。所以，当背景颜色为蓝色时，我希望文本颜色变成白色。小提琴

.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(注意浏览器的兼容性(为文本着色。

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

Answer 2

您可以专门应用该颜色。https://jsfiddle.net/h7jhcbm0/2/

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