如何使用 mix-blend-mode 操作文本颜色

Question

我正在尝试使用 CSS 中的 mix-blend-mode 来操纵文本颜色。我有一些内容在图像之上，文本的颜色是白色，我的图像有一个白色的形状。当文字位于形状之上时，我想混合文字。

我已经尝试了一些测试，如果我将 mix-blend-mode 应用于正文而不是元素，我得到了我想要的结果。我不能在 body 上使用 mix-blend-mode，有没有办法在不在 body 上使用 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 here, or the JSFiddle这里，你会看到我想要的结果。

PS: 我需要给文本一个不同的颜色（例如蓝色），当它在白色形状的顶部时。

Answer 1

将所有内容包裹在母版中 div 并将混合模式应用于母版而不是主体。

请注意，混合模式不支持 IE，因此您可能需要该浏览器集的回退。我建议小黑text-shadow.

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

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

如何使用 mix-blend-mode 操作文本颜色

How to manipulate text color with mix-blend-mode

html

css

mix-blend-mode