title: Apply opacity to background image but not text
body: <p>My problem is when I make my picture darker the text in class <code>.text</code> gets darker too, and I don't know how to avoid this.</p>
  
  <p>I know one solution: to make <code>.wrap</code> <code>position:absolute</code> and class <code>.text</code> make not in <code>image</code> but this solution is unsuitable for me (like <a href="https://stackoverflow.com/questions/11535392/how-to-decrease-image-brightness-in-css">this</a>).</p>
  
  <p>Any other ideas?</p>
  
  <p>This is the code that I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    width: 100%;
    background: #000 none repeat scroll 0% 0%;
  }
  .image {
    background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
    background-size: cover;
    opacity: 0.8;
    height: 100vh;
    max-height: 350px;
    min-height: 200px;
  }
  .text {
    color: #FFF;
    font-weight: 900;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;div class="image"&gt;
      &lt;div class="text"&gt;
        &lt;p&gt;I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
          YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/mqke05L0/5/" rel="noreferrer">jsfiddle demo</a></p>