title: how to handle 'double opacity' of two overlapping divs
body: <p>I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can't use an image. </p>
  
  <p>EDIT -- The little circle is supposed to have a canvas element in it. Not sure if pseudo-elements would be the best solution.</p>
  
  <p>Is there anyway to do this with CSS, or should I just use canvas?</p>
  
  <p>example -</p>
  
  <p><a href="http://dabblet.com/gist/1566209">http://dabblet.com/gist/1566209</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="foo"&gt;
      &lt;div id="bar"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/**
   * Double Opacity
   */
  body{background:green;}
  
  #foo{
  height:150px;
  width:250px;
  background:rgba(0, 0, 0, 0.6);
  position:absolute;
  left:40%;
  top:20%;
  }
  
  #bar{
  height:40px;
  width:40px;
  background:rgba(0, 0, 0, 0.6);
  border-radius:40px;
  position:absolute;
  top:-15px;
  left:-15px;
  }
  </code></pre>