¿Atenuar toda la pantalla excepto un área fija?

Question 1

Quiero crear un tutorial que guíe al usuario exactamente donde hacer clic. Estoy tratando de cubrir toda la pantalla con una <div>, que se atenuará todos los elementos excepto una región específica que se encuentra en un fijo width, height, topy left.

El problema es que no puedo encontrar una manera de "cancelar" el de los padres background-color(que también es transparente).

En el recortado a continuación, holeestá el div que se supone que no tiene ninguno background-color, incluido el de su padre.

¿Se puede lograr esto en absoluto? ¿Algunas 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>

Expandir fragmento

Aquí hay una imagen de maqueta de lo que estoy tratando de lograr:

Question 2

Podrías hacerlo con solo uno divy darle un box-shadow.

EDITAR: como señaló @Nick Shvelidze, debería considerar agregarpointer-events: none

vmaxValor agregado para box-shadowcomo sugirió @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>

Expandir fragmento

Question 3

Puede crear un SVG que se rellena con una ruta que tiene el agujero donde lo necesita. Pero supongo que necesita encontrar una manera de manejar los clics, ya que todos ellos estarán dirigidos al svg superpuesto. Creo que document.getElementFromPointpuedo ayudarte aquí. mdn

Question 4

Esto también se puede hacer de manera similar a la respuesta de @ VilleKoo, pero con un borde.

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

<div></div>

Expandir fragmento

Question 5

Puede lograr lo mismo que en la respuesta de VilleKoo usando la outlinepropiedad CSS . Tiene un excelente soporte de navegador (y funciona también en IE8 +). Los contornos tienen la misma sintaxis que los bordes, pero a diferencia del borde, no ocupan espacio, se dibujan sobre el contenido.

También para IE9 + puede reemplazar 99999pxcon calc(100 * (1vh + 1vw - 1vmin)).

La desventaja de este enfoque es que outlineno se ve afectado por border-radius.

Manifestación:

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

<div></div>

Expandir fragmento

Question 6

Aquí hay un código jQuery simple usando @VilleKoo css

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>

Expandir fragmento

Question 7

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