title: How to manipulate text color with mix-blend-mode
body: <p>I'm trying to manipulate the text color with <code>mix-blend-mode</code> in CSS. I have some content that goes on top of the image, the color of the text is white, my image has a white shape. When the text is on top of the shape I want to blend the text.</p>
  
  <p>I have tried a few tests and I get the result I want, if I apply the <code>mix-blend-mode</code> on the body, but not on the element. I can't use the <code>mix-blend-mode</code> on body, is there a way to get the same result, but without using <code>mix-blend-mode</code> on body?</p>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Please have a look on the <a href="http://codepen.io/anon/pen/obRKEy" rel="nofollow">Codepen</a> here, or the <a href="https://jsfiddle.net/fsgqe78j/" rel="nofollow">JSFiddle</a> here, you will see the result I want.</p>
  
  <p>PS: I need to give the text a different color (eg. blue), when it's on top of the white shape.</p>