title: CSS overlapping elements & opacity issue
body: <p>I've stumbled upon an issue with rendering two overlapping elements with opacity = .5. The elements are exactly the same and positioned absolutely. One is on top of the other.
  Common sense tells that the effect should give us an image with 100% opacity (0.5+0.5 = 1), but it doesn't.<br><br>I would really appreciate if anyone cared to explain the mechanism of rendering such elements, because clearly there's some underlying issue that I don't get.<br><br>
  HTML:</p>
  
  <pre><code>&lt;div class="test"&gt;
      &lt;img src="..." alt="" width="200" height="200" class="t"/&gt;
      &lt;img src="..." alt="" width="200" height="200" class="t"/&gt;   
  &lt;/div&gt;
  &lt;img src="..." alt="" width="200" height="200" class="test"/&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.test{
      float: left;
      position:relative;
      width: 200px;
      height: 200px;
  }
  .test .t{
      position:absolute;
      top:0;
      left:0;
      opacity: 0.5;
  }
  </code></pre>
  
  <p><br>
  <a href="http://jsfiddle.net/Z3rAm/">jsFiddle</a><br><br>Thanks</p>