html - two overlaying divs with a transparent color, how to make upper one mask the lower one? -

i have 2 divs overlap. 1 square rounded corners such it's circle , other long rectangle. they're @ top of page make nice header. circle overlaps rectangle. want put buttons in there, etc. both divs use background color. note transparency.

background-color:rgba(256,256,256,0.2);   

when circle overlaps rectangle, naturally colors blended color stronger (it's more white). there way "ignore" bottom color since it's underneath , have top color dominant one? css blending options me out here or have pull rectangle our , somehow plug crack between circle , rectangle?

.rectangle { width:100%; height:100px; background-color:rgba(256,256,256,0.2);   margin-bottom:5px; }  .circle { width:400px; height:400px; top:-200px; left:-200px; position:absolute; background-color:rgba(256,256,256,0.2);   border-radius:200px; }