title: Remove inheritance of opacity from parent?
body: <p>I have a <code>div</code> tag. I want to remove the children's inheritance of <code>#overlay</code>'s opacity </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;body id="bg"&gt;
      &lt;div id="overlay"&gt;
          &lt;header id="colortext"&gt;dgjdhgjdhd&lt;/header&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And this my css code.</p>
  
  <pre><code>#bg{
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-image: url(../Images/bg.jpg);
  }
  #overlay{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      background-color: #000;
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
  }
  #colortext{
      background-image:none;
      margin-top: 7px;
      margin-left: 16px;
      top: 2%;
      left: 2%;
      color: #FFFFFF;
      text-align: left;
      font-size: xx-large;
      opacity:1 !important;
  }
  </code></pre>
  
  <p>I want to have like this site background: <a href="http://www.ehsanakbari.ir/" rel="nofollow">http://www.ehsanakbari.ir/</a></p>
  
  <p>How can I do this?</p>