Javascript 除固定区域外，是否使整个屏幕变暗？

我想创建一个教程，它将引导用户准确地点击哪里。我试图用一个

覆盖整个屏幕，它将使所有元素变暗，除了一个特定区域，该区域位于固定的

宽度

、

高度

、

顶部

和

左侧

问题是，我无法找到一种方法来“取消”父项的

背景色（也是透明的）

在下面剪下的部分中，
孔
是应该没有任何
背景色的div，包括其父级的

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


#bg{
背景颜色：灰色；
不透明度：0.6；
宽度：100%；
高度：100vh；
}
#洞{
位置：固定；
顶部：100px；
左：100px；
宽度：100px；
高度：100px；
}

您可以创建一个SVG，其中填充了一条路径，该路径在需要的地方有一个洞。但是我想您需要找到一种处理点击的方法，因为所有点击都是针对覆盖的svg的。我需要一个东西
文档。getElementFromPoint
可以在这里帮助您
 您可以只使用一个
div
并给它一个
框阴影

编辑：
正如Nick Shvelidze指出的，您应该考虑添加<代码>指针事件：NO/<代码> 

根据@Prinzhorn的建议，为
框阴影添加了
vmax
值


div{
位置：固定；
宽度：200px；
高度：200px；
顶部：50px；
左：50px；
/*对于IE*/
盒影：0.1000px rgba（0,0,0,3）；
/*对于真正的浏览器*/
盒影：0.100V最大rgba（0,0,0,3）；
指针事件：无；
}
这也可以类似于@VilleKoo的答案，但有一个边框


div{
边框样式：实心；
边框颜色：rgba（0,0,0,3）；
指针事件：无；
位置：绝对位置；
顶部：0；底部：0；左侧：0；右侧：0；
边框宽度：40px 300px 50px 60px；
}
这里是使用@VilleKoo css的简单jQuery代码


var调光器=（函数（）{
变量el=$（“.dimmer”）；
返回{
showAt：函数（x，y）{
埃尔
.css({
左:x,，
上图：y，
})
.removeClass（“隐藏”）；
},
隐藏：函数（）{
el.addClass（“隐藏”）；
}
}
}());
$（“.btn hide”）。单击（函数（）{Dimmer.hide（）；}）；
$（“.btn show”）。单击（函数（）{Dimmer.showAt（50,50）；}）
。调光器{
位置：固定；
宽度：200px；
高度：200px；
顶部：50px；
左：50px；
框阴影：0.1000px rgba（0,0,0,3）；/*用于IE*/
框阴影：0 100vmax rgba（0,0,0,3）；/*适用于真实浏览器*/
指针事件：无；
}
.hidden{display:none；}

JS-Bin
您可以实现与使用CSS属性相同的效果。它具有出色的浏览器支持（也适用于IE8+）。轮廓与边框具有相同的语法，但与边框不同，轮廓不占用空间，而是在内容上方绘制

同样，对于IE9+，您可以将
9999px
替换为
calc（100*（1vh+1vw-1vmin））

这种方法的缺点是
轮廓
不受
边界半径
的影响

演示：


div{
位置：固定；
宽度：200px；
高度：200px；
顶部：50px；
左：50px；
/*IE8*/
轮廓：9999px固体rgba（0,0,0,3）；
/*IE9+*/
大纲：计算（100*（1vw+1vh-1vmin））固体rgba（0,0,0,3）；
/*对于其他浏览器*/
轮廓：100V最大实心rgba（0,0,0,3）；
指针事件：无；
}
我认为谷歌反馈表单使用svg来调暗休息区。如果你想让下面的区域可以点击，一定要添加
指针事件：none
。1000px对我来说似乎不够-似乎有太多的情况下，这不会填满屏幕，否则真是聪明的解决方案。@EdmundReed您可以根据需要调整它：）
box shadow:0,0,100vmax rgba（0,0,0,3）将保证涵盖整个screen@VilleKoo您可以将它添加到1000px行后面，并将其作为后备功能。如果您正在创建功能教程/教程，您可能会对其中一个js库感兴趣。它们有一些漂亮的特性，可以省去你编写一堆一次性css效果的麻烦。查看或。这只是一个lib的建议：
#bg {
   background-color: gray;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99998;
}
#hole {
   position: fixed;
   top: 100px;
   left: 100px;
   width: 100px;
   height: 100px;
   z-index: 99999;
}