如何使用混合混合模式处理文本颜色

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

请看一下这里的科德芬，或者这里的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>

​