title: Change text color based on the background color
body: <p>Is it possible to dynamically change the text color based on the background color using CSS, or JS if it's not possible with CSS? I have a image that comes under the text. My text color is white, but the image has a white shape on. And when text goes above the white shape, I need to change the text color in a darker color.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="biography"&gt;
              &lt;img src="http://s16.postimg.org/c09zw94jp/author_photo.png" alt="author" class="bio-img"&gt;
              &lt;div class="biography-text"&gt;
                  &lt;p&gt;
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit &lt;br&gt;
                      Vestibulum pellentesque auctor quam a sollicitudin.&lt;br&gt;
                      Pellentesque accumsan a sem eget dictum.
                  &lt;/p&gt;
                  &lt;p&gt;
                      Morbi dictum lorem tortor, id consequat libero gravida ut.&lt;br&gt;
  Nullam dictum sed massa et bibendum.
                  &lt;/p&gt;
                  &lt;p&gt;Praesent sed dui mattis, dictum urna sit amet, imperdiet purus.&lt;/p&gt;
                  &lt;p&gt; Suspendisse potenti.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    background-color: #7ccbe6;
  }
  .biography {
      min-height: 410px;
  }
  .biography .biography-text {
      position: relative;
      margin-top: -420px;
      padding: 82px 130px 0 380px;
      z-index: 1;
  }
  
  .biography-text {
      color: #fff;
  }
  </code></pre>
  
  <p>Here's a <a href="http://codepen.io/anon/pen/obRKEy" rel="nofollow">Codepen</a> to see the better picture.</p>