How to cut a part of div
css
Solution
I'm not sure you can remove part of the background like you describe. Instead, your overlay can have a transparent background and it can contain four blue-ish-background `div`s that form a frame around the hole you want.
Here's some code that does this:
body {margin: 0; padding: 0}
#main {width: 500px; height: 200px; background: yellow;}
.overlay {background: rgba(0,0,0,0.5); position:absolute;}
#overlay-container { width: 500px; height: 200px; z-index: 99; position: absolute;}
#top {width: 100%; height: 50px}
#left {top:50px; width: 200px; height: 100px}
#right {left: 300px; width: 200px; height: 100px}
#bottom {left: -300px; top: 100px; width: 500px; height: 50px}
<div id="main"/>
<div id="overlay-container">
<div class="overlay" id="top"/>
<div class="overlay" id="left"/>
<div class="overlay" id="right"/>
<div class="overlay" id="bottom"/>
</div>
You can probably get rid of the `overlay-container` and simplify things a bit.
For the overlay, you could just use a `<div>` with a transparent background and a translucent border. Here's another example:
body { margin: 0; padding: 0; }
#background {
width:500px;
height:200px;
background: yellow;
}
#overlay {
border-color: rgba(0,0,0,0.5);
border-style: solid;
border-top-width: 50px;
border-left-width: 200px;
border-right-width: 200px;
border-bottom-width: 50px;
position: absolute;
top: 0;
width: 100px;
height: 100px;
z-index: 99;
}
<body>
<div id="background">some content</div>
<div id="overlay"></div>
</body>
Problem
I try to give you a broad picture of my problem. Suppose I have a overlay `div` on my page with `z-index: 99;`, with `background-color: rgba(0,0,0,0.5)`. Then I want to remove a part of overlay `div`, for example `100 x 100px` in `top: 50px;` and `left: 200px;`. By removing I mean that exclude a part of overlay `div` to make that part visible and remove the `background-color` from that. How can I do that?