title: CSS opacity within an image
body: <p>What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:</p>
  
  <pre><code>&lt;style&gt;
  #a {
    background-color: black;
    float: left;
  } #b {
      opacity : 0.4;
      filter: alpha(opacity=40); 
  } #div {
      position: absolute;
      height: 30px;
      width: 30px;
      top: 90px;
      left: 90px;
      border: 1px solid #FFF;
      background: transparent;
  }
  &lt;/style&gt;
  
  &lt;div id="a"&gt;
    &lt;div id="b"&gt;    
      &lt;img src="http://clagnut.com/images/ithaka.jpg" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="div"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any ideas? thx</p>