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

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

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

пример -

http://dabblet.com/gist/1566209

HTML:

<div id="foo">
    <div id="bar">
    </div>
</div>

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