Dim entire screen except a fixed area?

I want to create a tutorial which will lead the user exactly where to click. I'm trying to cover the entire screen with a <div> which will dim all elements except a specific region which is in a fixed width, height, top and left.

The problem is, I cannot find a way to "cancel" the parent's background-color (which is also transparent).

In the snipped below, hole is the div that is supposed to be without any background-color, including its parent's.

Can this be accomplished at all? Any ideas?

#bg{
   background-color:gray;
   opacity:0.6;
   width:100%;
   height:100vh;
}
#hole{
   position:fixed;
   top:100px;
   left:100px;
   width:100px;
   height:100px;
}

<div id="bg">
    <div id="hole"></div>
</div>

Here's a mockup image of what I'm trying to achieve: