title: Background image opacity without affecting text
body: <p>I have a problem with my background image and text. I only want to apply the opacity to background image but mine, the text was affected.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content"&gt;
          &lt;div class="box"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.content{
      background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
      opacity: 0.5;
  }
  
  .content .box p{
      opacity: 1;
  }
  </code></pre>