title: Use Pseudo Element to Create Background Overlay
body: <p>My goal is to have a div with any background, which then uses a pseudo element to create a transparent white overlay, thus "lightening" the background of the div.  The "overlay" must be UNDER the contents of the div, though.  So, in the following example:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="content"&gt;
          &lt;h1&gt;Hello, World&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .container {
      background-color: red;
      width: 500px;
      height: 500px;
      position: relative;
  }
  .content {
      background-color: blue;
      width: 250px;
  }
  .container::before {
      content:"";
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      background-color: rgba(255, 255, 255, .8);
  }
  </code></pre>
  
  <p>The <code>.content</code> <code>div</code> should not be "underneath" the white overlay, aka <code>.container::before</code>. </p>
  
  <p>I would prefer not having to use <code>z-index</code> on <code>.content</code>, but I can if that is the only solution. </p>
  
  <p>End goal: The red should be covered while the text and blue are not.</p>
  
  <p>JS fiddle: <a href="http://jsfiddle.net/1c5j9n4x/">http://jsfiddle.net/1c5j9n4x/</a></p>