1

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

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

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：当文本位于白色形状的顶部时，我需要给文本一个不同的颜色（例如蓝色）。

4

1 回答 1

3

将所有内容包装在主 div 中并将混合模式应用于该主 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>

于 2016-02-20T20:32:34.177 回答