问除固定区域外，是否调暗整个屏幕？

EN

我想创建一个教程，将引导用户准确地点击。我试图用一个<div>覆盖整个屏幕，它将使所有元素变暗，但特定区域除外，它位于固定的width、height、top和left中。

问题是，我找不到一种方法来“取消”父母的background-color (这也是透明的)。

在下面的片段中，hole是应该没有任何background-color的div，包括它的父div。

这到底能做到吗？有什么想法吗？

​

#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>

​

这是我正在尝试实现的一个模型图像：

​

​