Question

我正在尝试获得一种类似于此处https://css-tricks.com/reverse-text-color-mix-blend-mode/所述的效果。问题是我的背景元素之一不是我要更改颜色的文本元素的父元素，从而产生了不希望的结果，并且我不知道如何实现所需的效果。我得到的结果是此图中显示的结果： Actual result

我希望绿色倾斜带上的文本为白色，而白色区域上的文本则为绿色。我曾尝试将绿带div放进去，但是当我向带中添加倾斜效果（使用clip-path或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>

几个小时以来，我一直在努力寻找解决方案，但是什么也没有，所以希望您能为我提供帮助。谢谢。

Answer 1

尝试＃green-band〜h1只是将白色变成彩色。

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

使用混合混合模式：减淡色；它为我工作。

如何根据同级元素的背景颜色更改文本颜色

2 个答案: