Assombrir tout l'écran sauf une zone fixe?

Question 1

Je souhaite créer un didacticiel qui mènera l'utilisateur exactement là où cliquer. Je suis en train de couvrir tout l'écran avec <div>qui BAISSERA tous les éléments sauf une région spécifique qui est fixe width, height, topet left.

Le problème est que je ne trouve pas de moyen «d'annuler» celui du parent background-color(qui est également transparent).

Dans l'extrait ci-dessous, holeest le div qui est censé être sans aucun background-color, y compris son parent.

Cela peut-il être accompli du tout? Des idées?

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

Développer l'extrait

Voici une maquette de ce que j'essaie d'accomplir:

Question 2

Vous pouvez le faire avec un seul divet lui donner un box-shadow.

ÉDITER: comme @Nick Shvelidze l'a souligné, vous devriez envisager d'ajouterpointer-events: none

Valeur vmaxajoutée box-shadowcomme le suggère @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>

Développer l'extrait

Question 3

Vous pouvez créer un SVG qui est rempli d'un chemin avec le trou là où vous en avez besoin. Mais je suppose que vous devez trouver un moyen de gérer les clics, car tous seront ciblés sur le svg superposé. Je document.getElementFromPointpeux vous aider ici. mdn

Question 4

Cela peut également être fait de la même manière que la réponse de @ VilleKoo, mais avec une bordure.

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>

Développer l'extrait

Question 5

Vous pouvez obtenir la même chose que dans la réponse de VilleKoo en utilisant CSSoutline propriété . Il a un excellent support de navigateur (et fonctionne également dans IE8 +). Les contours ont la même syntaxe que les bordures, mais contrairement aux bordures, ils ne prennent pas de place, ils sont dessinés au-dessus du contenu.

Aussi pour IE9 +, vous pouvez le remplacer 99999pxpar calc(100 * (1vh + 1vw - 1vmin)).

L'inconvénient de cette approche est qu'elle outlinen'est pas affectée par border-radius.

Démo:

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>

Développer l'extrait

Question 6

Voici du code jQuery simple utilisant @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>

Développer l'extrait

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