除固定区域外,整个屏幕都变暗？

Question

我想创建一个教程,引导用户准确点击的位置.我试图覆盖整个屏幕,<div>这会变得暗淡,所有的元素,除了一个特定区域是在一个固定的width,height,top和left.

问题是,我找不到"取消"父母的方法background-color(这也是透明的).

在下面的剪辑中,hole是应该没有任何的div background-color,包括它的父级.

这可以完成吗？有任何想法吗？

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

这是我正在努力实现的模型图像:

Answer 1

你可以只用一个来做它div并给它一个box-shadow.

编辑: 正如@Nick Shvelidze所指出的那样,你应该考虑加入pointer-events: none

新增vmax的价值box-shadow为@Prinzhorn建议

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* for IE */
  box-shadow: 0 0 0 1000px rgba(0,0,0,.3);
  /* for real browsers */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);
  pointer-events: none;
}

<div></div>

Answer 2

您可以创建一个SVG,其中填充的路径包含您需要的孔.但我想你需要找到一种处理点击的方法,因为所有这些都将针对重叠的svg.我的事情document.getElementFromPoint可以帮助你.MDN