在175deg高度增加50％后更改文本颜色 [英] Change Text Color after 50% height at 175deg

问题描述

我正在以175度角更改50％高度后的背景颜色。因此，当背景颜色为蓝色时，我希望文本颜色变为白色。 小提琴

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>

推荐答案

新答案：

使用线性渐变设置 h1 元素的背景相同的形状，但要为文本提供颜色。而不是使文本颜色透明，并使用 background-clip：text （请注意浏览器的兼容性）来为文本着色。

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>

原始答案：

如果需要对比度而不是确切的颜色，则可以使用 mix-blend-mode 根据背景动态更改颜色：

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>

这篇关于在175deg高度增加50％后更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！