title: CSS Opacity inheritance issue
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/8237886/css-opacity-property">CSS Opacity Property</a>  </p>
  </blockquote>
  
  
  
  <p>I'm making a layer on an image which has a transparency and I got a problem there.</p>
  
  <p>When I wrote down any texts on the layer, they also get the same transparency.</p>
  
  <p>I thought it's because of the inheritance problem and added 'position:relative' to reset my child div, though, it didn't work at all.</p>
  
  <p>I just want to reset the opacity of the child div(#TXT below).</p>
  
  <p>Here's my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;header&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;style type="text/css"&gt;
          *{margin: 0; padding:0; background-color: #555;}
          #wrapper {
              margin:0 auto; 
              background-color: white;
              width: 922px;
              height:349px;
              margin-top: 150px;
              -webkit-box-shadow: 0px 0px 7px 7px #333;
              -moz-box-shadow: 0px 0px 7px 7px #333;
              }   
  
          #ImgSection {
              width: 922px;
              height: 349px;
              background-color: white;
              position: absolute;
              background: url("brand-new-car.jpg") -50px -200px no-repeat;
              }
  
          #TxtSection {
              width: 322px;
              height: 349px;
              background-color: #222;
              opacity: .5;        
              float: right;
              -webkit-box-shadow: inset 3px 0px 3px 0px black;
              -moz-box-shadow: inset 3px 0px 3px 0px black;
              }
  
              #TXT{
              position: relative;
              font-size: 50px;
              opacity: 1;
              }
  
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
  
      &lt;/script&gt;
  &lt;/header&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="ImgSection"&gt;&lt;/div&gt;
          &lt;div id="TxtSection"&gt;
              &lt;div id="TXT"&gt;dsdsad&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the size of the image brand-new-car.jpg is a 1024x768.</p>
  
  <p>And I want to know how to reset the opacity of #TXT.</p>
  
  <p>please help.</p>
  
  <p>Thanks in advance.</p>