如何根据兄弟元素的背景颜色更改文本颜色答案

【问题标题】：How to change text color based on background color of sibling element如何根据兄弟元素的背景颜色更改文本颜色
【发布时间】：2019-06-26 14:35:47
【问题描述】：

我正在尝试获得类似于此处https://css-tricks.com/reverse-text-color-mix-blend-mode/ 描述的效果。问题是我的背景元素之一不是我试图改变颜色的文本元素的父元素，产生了不想要的结果，我无法弄清楚如何达到我想要的效果。我得到的结果是这张图片中显示的结果： Actual result

我希望绿色倾斜带上的文本是白色的，而白色区域上的文本是绿色的。我尝试将绿色带 div 放入其中，但是当我将倾斜效果添加到带（使用剪辑路径或 skewX）时，它会被剪辑或扭曲。用于获取图像中显示的结果的代码如下：

#green-band {
  position: absolute;
  width: 80%;
  height: 100%;
  background-color: #9DC42E;
  transform: skewX(-45deg);
}

#green-band~h1 {
  color: #623BD1;
  mix-blend-mode: difference;
}

#green-band~h3 {
  mix-blend-mode: difference;
}

<div class="container">
  <div class="row">
    <div class="col-12 col-md-3 text-center d-flex flex-column justify-content-center">
      <div id="green-band"></div>
      <h1 class="">UBICACIÓN ESTRATÉGICA</h1>
      <h3 class="text-gray mt-5 font-italic">A solo 10 minutos del centro Pereira</h3>
      <h3 class="text-gray mt-5 font-italic">Cerca al aeropuerto</h3>
    </div>
    <div class="col-12 col-md-9">
      <img src="images/cargando.gif" data-src="images/mapa.png" class="img-fluid lazy" />
    </div>
  </div>
</div>

我一直在努力寻找解决方案几个小时，但一无所获，所以我希望你能帮助我。谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

尝试在#green-band~h1 中添加白色。

【讨论】：

我试过了，但我得到的是黑色背景上的文本和接近紫色的绿色带上的文本

【解决方案2】：

#green-band {
  position: absolute;
  width: 80%;
  height: 100%;
  background-color: #9DC42E;
  transform: skewX(-45deg);
}

#green-band~h1 {
  color: #623BD1;
  mix-blend-mode: color-dodge;
}

#green-band~h3 {
  mix-blend-mode: difference;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-3 text-center d-flex flex-column justify-content-center">
      <div id="green-band"></div>
      <h1 class="">UBICACIÓN ESTRATÉGICA</h1>
      <h3 class="text-gray mt-5 font-italic">A solo 10 minutos del centro Pereira</h3>
      <h3 class="text-gray mt-5 font-italic">Cerca al aeropuerto</h3>
    </div>
    <div class="col-12 col-md-9">
      <img src="images/cargando.gif" data-src="images/mapa.png" class="img-fluid lazy" />
    </div>
  </div>
</div>
</body>
</html>

使用混合混合模式：颜色减淡；它对我有用。

【讨论】：

我尝试在#green-band~h1 中将混合混合模式更改为颜色减淡，但我得到的是白色的所有文本，这意味着只能看到绿色带上的部分。我不知道为什么我的结果与您答案中的代码 sn-p 不同，其中绿色带上的文本是白色的（如我们所愿），但白色背景上的文本是紫色
为此，您需要在使用混合混合模式的类/ID 上设置所需的颜色。