Question

我试图在CSS中使用mix-blend-mode操作文本颜色。我有一些内容在图像的顶部，文本的颜色是白色，我的图像有白色的形状。当文本位于形状的顶部时，我想要混合文本。

我已经尝试了一些测试，如果我在身体上应用mix-blend-mode而不是在元素上，我会得到我想要的结果。我无法在身体上使用mix-blend-mode，是否有办法获得相同的结果，但却没有在身体上使用mix-blend-mode？

CSS：

body {
  background-color: #607bff;
  mix-blend-mode: screen;
}
.biography {
  margin: 0;
  width: 100%;
  max-width: 770px;
  position: relative;
}
.biography img {
    max-width: 100%;
}
.biography .biography-text {
  position: absolute;
  top: -330px;
  left: 400px;
}

.biography-text {
    color: #fff;
    mix-blend-mode: difference;
}

请查看此处的Codepen，或JSFiddle此处，您会看到我想要的结果。

PS：当文本位于白色顶部时，我需要为文本提供不同的颜色（例如蓝色）。

Answer 1

将所有内容包裹在主div中并将混合模式应用于该模式而不是正文。

请注意，混合模式没有IE支持，因此您可能需要对该broswer集进行回退。我会建议一个小的黑色text-shadow。

＆＃13;

body {
  background-color: #607bff;
}
.wrap {
  mix-blend-mode: screen;
}
.biography {
  margin: 0;
  width: 100%;
  max-width: 770px;
  position: relative;
}
.biography img {
  max-width: 100%;
}
.biography .biography-text {
  position: absolute;
  top: -330px;
  left: 400px;
}
.biography-text {
  color: #fff;
  mix-blend-mode: difference;
}

＆＃13;

<div class="wrap">
  <img src="http://s18.postimg.org/7fq7hbjzd/author_photo.png" alt="author" class="bio-img">
  <div class="biography">
    <div class="biography-text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit
        <br>Vestibulum pellentesque auctor quam a sollicitudin.
        <br>Pellentesque accumsan a sem eget dictum.
      </p>
      <p>
        Morbi dictum lorem tortor, id consequat libero gravida ut.
        <br>Nullam dictum sed massa et bibendum.
      </p>
      <p>Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.</p>
      <p>Suspendisse potenti.</p>
    </div>
  </div>
</div>

＆＃13;

如何使用mix-blend-mode处理文本颜色

1 个答案: