title: CSS div opacity only on outer div
body: <p>I've got two divs, the outer and the inner div. I have a background image and the outer div has an opacity set however i just cannot seem to get the inner div to not inherit the opacity of outer div. i would like the inner div to be a solid colour. </p>
  
  <p>my code is below and a jsfiddle here: <a href="http://jsfiddle.net/3TK3U/" rel="nofollow">http://jsfiddle.net/3TK3U/</a></p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  body
  {
  background-image:url('http://media-bubble.info/images/layout/background.png');
  }
  
  .outsideBox {
      width:70%;
      height:200px;
      background-color: #ffffff;
      opacity:0.7; 
      filter:alpha(opacity=70);
      text-align:center;
  }
  
  .insideBox {
      width:40%;
      height:80px;
      background-color: #999;
      z-index:999999;
  }
  
  &lt;/style&gt;
  
  
  &lt;div id="Introduction" class="outsideBox"&gt;
      &lt;div id="Introduction" class="insideBox"&gt;This is the inside box which should not inherit transparancy&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>