как обрабатывать "двойную непрозрачность" двух перекрывающихся блоков div

У меня есть два блока div, оба с непрозрачностью 0,6. Мне нужно, чтобы они перекрывались, но сохраняли свою непрозрачность, а не создавали новый комбинированный уровень непрозрачности. Я не могу использовать изображение.

РЕДАКТИРОВАТЬ - В маленьком круге должен быть элемент холста. Не уверен, что псевдоэлементы будут лучшим решением.

Есть ли способ сделать это с помощью CSS, или я должен просто использовать холст?

пример -

http://dabblet.com/gist/1566209

HTML:

CSS:

/**
 * 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;
}