Den gesamten Bildschirm mit Ausnahme eines festen Bereichs dimmen?

87

Ich möchte ein Tutorial erstellen, das den Benutzer genau dahin führt, wo er klicken soll. Ich versuche, den gesamten Bildschirm mit einem zu bedecken, der <div>alle Elemente außer einem bestimmten Bereich, der sich in einem festen , und widthbefindet height, topdimmt left.

Das Problem ist, ich kann keinen Weg finden, die der Eltern "abzubrechen" background-color(was auch transparent ist).

Im Ausschnitt unten holeist das Div, das ohne sein soll background-color, einschließlich des seiner Eltern.

Kann das überhaupt erreicht werden? Irgendwelche Ideen?

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

Erweitern Sie das Snippet

Hier ist ein Modellbild dessen, was ich erreichen möchte:

— Koby Douek
quelle

13

Wenn Sie eine Feature-Tour / ein Tutorial erstellen, interessieren Sie sich möglicherweise für eine der js-Bibliotheken, um dies zu tun. Sie haben einige raffinierte Funktionen und ersparen Ihnen die Mühe, eine Reihe von einmaligen CSS-Effekten zu schreiben. Schauen Sie sich introjs.com oder linkedin.github.io/hopscotch an .

— 17.

2

Dies ist nur ein Vorschlag für eine Bibliothek: heelhook.github.io/chardin.js

— online Thomas

125

Du könntest es mit nur einem machen divund es geben box-shadow.

BEARBEITEN : Wie @Nick Shvelidze betonte, sollten Sie das Hinzufügen in Betracht ziehenpointer-events: none

Hinzugefügt vmaxWert box-shadowals @Prinzhorn vorgeschlagen

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>

Erweitern Sie das Snippet

— VilleKoo
quelle

27

Stellen Sie sicher, pointer-events: nonedass Sie hinzufügen, wenn der Bereich darunter anklickbar sein soll.

— Nick Shvelidze

4

1.000px scheint mir nicht genug zu sein - es scheint zu viele Fälle zu geben, in denen dies den Bildschirm nicht ausfüllt, sonst eine wirklich clevere Lösung.

— ESR

1

@ EdmundReed können Sie das für Ihre Bedürfnisse anpassen :)

— VilleKoo

8

box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);wird garantiert den gesamten Bildschirm abdecken

— Prinzhorn

2

@ VilleKoo können Sie es hinter der 1000px-Linie hinzufügen und das als Rückfall behalten

— Prinzhorn

19

Sie können eine SVG erstellen, die mit einem Pfad gefüllt ist, der das Loch hat, in dem Sie es benötigen. Aber ich denke, dann müssen Sie einen Weg finden, um mit Klicks umzugehen, da alle auf das überlagerte SVG ausgerichtet sind. Ich document.getElementFromPointkann dir hier helfen. mdn

— philipp
quelle

Ich denke, Google Feedback-Formular mit SVG, um Ruhebereich zu dimmen.

— Durga

2

Dies kann auch ähnlich wie bei der Antwort von @ VilleKoo erfolgen, jedoch mit einem Rand.

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>

Erweitern Sie das Snippet

— Dan
quelle

1

Mit der CSS- Eigenschaft können Sie dasselbe erreichen wie in der Antwort von VilleKoo outline . Es hat eine ausgezeichnete Browser-Unterstützung (und funktioniert auch in IE8 +). Konturen haben dieselbe Syntax wie Rahmen, aber im Gegensatz zu Rahmen nehmen sie keinen Platz ein, sondern werden über den Inhalt gezeichnet.

Auch für IE9 + Sie ersetzen können 99999pxmit calc(100 * (1vh + 1vw - 1vmin)).

Nachteil dieses Ansatzes ist, dass outlinenicht betroffen ist border-radius.

Demo:

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>

Erweitern Sie das Snippet

— Vadim Ovchinnikov
quelle

0

Hier ist einfacher jQuery-Code mit @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>

Erweitern Sie das Snippet

— Buksy
quelle

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

— Omar Melendrez
quelle