Dim écran entier sauf une zone fixe ?

Question

Je veux créer un tutoriel qui indiquera à l'utilisateur exactement où cliquer. J'essaie de couvrir l'ensemble de l'écran avec une

qui obscurcira tous les éléments sauf une région spécifique qui a une largeur, une hauteur, un top et un left fixes.

Le problème est que je ne trouve pas de moyen de "désactiver" la background-color du parent (qui est également transparent).

Dans l'extrait ci-dessous, hole est la div qui est censée être sans background-color, y compris celui de 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;
}

Voici une image de maquette de ce que j'essaie de réaliser :

Answer 1

Vous pourriez le faire avec un seul div et lui donner une box-shadow.

MODIFICATION: comme l'a souligné @Nick Shvelidze, vous devriez envisager d'ajouter pointer-events: none

Ajout de la valeur vmax pour box-shadow comme l'a suggéré @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;
}

Answer 2

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 pense que document.getElementFromPoint peut vous aider ici. mdn

Answer 3

Cela peut également être fait de manière similaire à 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;
}

Answer 4

Vous pouvez obtenir le même résultat que dans la réponse de VilleKoo en utilisant la propriété CSS outline. Il a un excellent support des navigateurs (et fonctionne aussi 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 remplacer 99999px par calc(100 * (1vh + 1vw - 1vmin)).

L'inconvénient de cette approche est que l'outline n'est pas affecté par le border-radius.

Démonstration:

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);
  /* pour les autres navigateurs */
  outline: 100vmax solid rgba(0,0,0,.3);
  pointer-events: none;
}

Answer 5

Voici un simple code jQuery utilisant le css de @VilleKoo

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); /* pour IE */
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.3); /* pour les vrais navigateurs */
  pointer-events: none;
}

.hidden { display: none; }

  JS Bin