Przyciemnić cały ekran z wyjątkiem ustalonego obszaru?

88

Chcę stworzyć tutorial, który poprowadzi użytkownika dokładnie, gdzie kliknąć. Staram się pokryć cały ekran z <div>którego będzie przyciemnić wszystkie elementy z wyjątkiem określonym regionie , który jest w stałym width, height, topi left.

Problem w tym, że nie mogę znaleźć sposobu na „anulowanie” rodzica background-color(co również jest przezroczyste).

Na poniższym wycięciu holeznajduje się div, który powinien być bez żadnego background-color, w tym jego rodzica.

Czy można to w ogóle osiągnąć? Jakieś pomysły?

#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>
Rozwiń fragment

Oto przykładowy obraz tego, co próbuję osiągnąć:

wprowadź opis obrazu tutaj

javascript jquery html css Koby Douek
źródło
13
Jeśli tworzysz prezentację funkcji / samouczek, możesz być zainteresowany jedną z bibliotek js, która to robi. Mają kilka fajnych funkcji i zaoszczędzą ci kłopotów z napisaniem kilku jednorazowych efektów CSS. Sprawdź introjs.com lub linkedin.github.io/hopscotch .
octern
2
To tylko sugestia dla lib: heelhook.github.io/chardin.js
online Thomas

Odpowiedzi:

125

Możesz to zrobić tylko z jednym divi nadać mu plik box-shadow.

EDYCJA: jak zauważył @Nick Shvelidze, powinieneś rozważyć dodaniepointer-events: none

vmaxWartość dodana box-shadowzgodnie z sugestią @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>
Rozwiń fragment

VilleKoo
źródło
28
Pamiętaj, aby dodać, pointer-events: nonejeśli chcesz, aby obszar pod nim był klikalny.
Nick Shvelidze,
4
1000 pikseli nie wydaje mi się wystarczające - wydaje się, że byłoby zbyt wiele przypadków, w których to nie wypełnia ekranu, w przeciwnym razie naprawdę sprytne rozwiązanie.
ESR,
1
@EdmundReed możesz to dostosować do swoich potrzeb :)
VilleKoo
8
box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);na pewno obejmie cały ekran
Prinzhorn
2
@VilleKoo, możesz dodać to za linią 1000px i zachować to jako rozwiązanie
awaryjne
19

Możesz utworzyć plik SVG wypełniony ścieżką z otworem w odpowiednim miejscu. Ale wydaje mi się, że musisz znaleźć sposób na obsługę kliknięć, ponieważ wszystkie z nich będą skierowane na nałożony plik SVG. I co document.getElementFromPointmoże pomóc tutaj. mdn

philipp
źródło
Myślę, że formularz opinii Google za pomocą svg do przyciemnienia obszaru odpoczynku.
Durga
3

Można to również zrobić podobnie jak odpowiedź @ VilleKoo, ale z obramowaniem.

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>
Rozwiń fragment

Dan
źródło
2

Możesz osiągnąć to samo, co w odpowiedzi VilleKoo za pomocą outlinewłaściwości CSS . Ma doskonałą obsługę przeglądarek (działa również w IE8 +). Kontury mają taką samą składnię jak obramowania, ale w przeciwieństwie do obramowań nie zajmują miejsca, są rysowane nad treścią.

Również dla IE9 + można zastąpić 99999pxz calc(100 * (1vh + 1vw - 1vmin)).

Wadą tego podejścia jest to, że outlinenie ma na niego wpływu border-radius.

Próbny:

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>
Rozwiń fragment

Vadim Ovchinnikov
źródło
0

Oto prosty kod jQuery wykorzystujący @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>
Rozwiń fragment

Buksy
źródło
0 
#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;
}
zerdnelemo
źródło