web-dev-qa-db-fra.com

Dim écran entier sauf une zone fixe?

Je veux créer un tutoriel qui mènera l'utilisateur exactement où cliquer. J'essaie de couvrir tout l'écran avec un <div> qui atténuera tous les éléments sauf une ( région spécifique qui se trouve dans un width fixe, height, top et left.

Le problème, c'est que je ne trouve pas le moyen "d'annuler" le background-color (qui est également transparent).

Dans la section ci-dessous, hole est le div qui est supposé être sans aucun 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;
}
<div id="bg">
    <div id="hole"></div>
</div>

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

enter image description here

javascriptjqueryhtmlcss
86
Koby Douek

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

EDIT: Comme @Nick Shvelidze l’a souligné, 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;
}
<div></div>
124
VilleKoo

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

19
philipp

Cela peut également être fait de la même manière que @ 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>
2
Dan

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

De plus, pour IE9 +, vous pouvez remplacer 99999px Par calc(100 * (1vh + 1vw - 1vmin)).

L'inconvénient de cette approche est que outline n'est pas affecté 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>
1
Vadim Ovchinnikov
#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;
}
0
Omar Melendrez

Voici un 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>
0
Buksy