Как манипулировать цветом текста с 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

Оберните все в мастер-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>