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; }
Comments
Post a Comment