Question

我正在以175度角度改变50％高度后的背景颜色。所以，当背景颜色为蓝色时，我希望文本颜色变为白色。 Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

新答案：

使用相同形状的线性渐变设置const curveTopRight = this.curveTopRight = this.renderer.path().css({ color: '#c8bfe7', fill: '#c8bfe7' }).attr({ d: `M ${rightMiddle.x} ${rightMiddle.y} Q ${rightTopMiddle.x} ${rightTopMiddle.y} ${rightTop.x} ${rightTop.y}`, 'stroke-width': 2, stroke: 'red', zIndex: 99 }).add()元素的背景，但是为文本设置所需的颜色。比文本颜色透明，并使用h1（注意browser's compatibility）为文本着色。

＆＃13;

background-clip: text

＆＃13;

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

＆＃13;

原始回答：

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

＆＃13;

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

＆＃13;

.bg {
  background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
  color: #000;
}

h1 {
  color: #fff;
  mix-blend-mode: difference;
}

＆＃13;

Answer 2

你可以专门应用那种颜色。看到 https://jsfiddle.net/h7jhcbm0/2/

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

h3 {
  color: #fff
}

在175度高度50％高度后更改文字颜色

2 个答案: