Как манипулировать цветом текста с помощью mix-blend-mode

Question

Я пытаюсь манипулировать цветом текста mix-blend-mode в CSS. У меня есть некоторый контент, который идет поверх изображения, цвет текста белый, мое изображение имеет белую форму. Когда текст находится поверх фигуры, я хочу смешать текст.

Я перепробовал несколько тестов и получил желаемый результат, если применил 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

Оберните все в master div и примените режим смешивания к этому, а не к телу.

Просто имейте в виду, что blend-mode не поддерживает 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>