除固定区域外，整个屏幕变暗？答案

【问题标题】：Dim entire screen except a fixed area?除固定区域外，整个屏幕变暗？
【发布时间】：2017-12-21 23:19:39
【问题描述】：

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

问题是，我找不到办法“取消”父母的background-color（这也是透明的）。

在下面的片段中，hole 是应该没有任何 background-color 的 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>

这是我要实现的目标的模型图像：

【问题讨论】：

如果您正在创建功能导览/教程，您可能会对执行此操作的其中一个 js 库感兴趣。它们有一些漂亮的功能，可以省去编写一堆一次性 css 效果的麻烦。查看introjs.com 或linkedin.github.io/hopscotch。
这只是一个lib的建议：heelhook.github.io/chardin.js

标签： javascript jquery html css

【解决方案1】：

您可以只使用一个div 并给它一个box-shadow。

编辑： 正如@Nick Shvelidze 指出的那样，您应该考虑添加pointer-events: none

按照@Prinzhorn 的建议为box-shadow 添加了vmax 值

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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

如果您希望其下方的区域可点击，请务必添加pointer-events: none。
1,000px 对我来说似乎不够 - 似乎有太多情况下它不会填满屏幕，否则非常聪明的解决方案。
@EdmundReed 您可以根据自己的需要进行调整:)
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);会保证覆盖全屏
@VilleKoo 您可以将其添加到 1000px 行的后面并将其保留为备用

【解决方案2】：

您可以创建一个 SVG，该 SVG 填充了一条路径，该路径具有您需要的孔。但我想你需要找到一种处理点击的方法，因为所有点击都将针对覆盖的 svg。我觉得document.getElementFromPoint 可以在这里为您提供帮助。 mdn

【讨论】：

我认为谷歌反馈表使用 svg 来调暗休息区。

【解决方案3】：

这也可以与@VilleKoo 的回答类似，但带有边框。

div {
    border-style: solid;
    border-color: rgba(0,0,0,.3);
    pointer-events: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    border-width: 40px 300px 50px 60px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

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

对于 IE9+，您也可以将 99999px 替换为 calc(100 * (1vh + 1vw - 1vmin))。

这种方法的缺点是outline不受border-radius的影响。

演示：

div {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  /* IE8 */
  outline: 99999px solid rgba(0,0,0,.3);
  /* IE9+ */
  outline: calc(100 * (1vw + 1vh - 1vmin)) solid rgba(0,0,0,.3);
  /* for other browsers */
  outline: 100vmax solid rgba(0,0,0,.3);
  pointer-events: none;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

这是使用 @VilleKoo css 的简单 jQuery 代码

var Dimmer = (function(){
  var el = $(".dimmer");
  
  return {
    showAt: function(x, y) {
      el
        .css({
          left: x,
          top: y,
        })
        .removeClass("hidden");
    },
    
    hide: function() {
      el.addClass("hidden");
    }
  }
}());


$(".btn-hide").click(function(){ Dimmer.hide(); });
$(".btn-show").click(function(){ Dimmer.showAt(50, 50); });

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

.hidden { display: none; }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="text">
    <select name="" id=""></select>
    <input type="checkbox">
  </div>
  <div>
    <input type="submit" disabled>
  </div>
  
  <input type="button" value="Hide" class="btn-hide">
  <input type="button" value="Show" class="btn-show">
  <div class="dimmer hidden"></div>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>

【讨论】：

【解决方案6】：

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

【讨论】：