Sabit bir alan dışında ekranın tamamı karartılsın mı?

Question 1

Kullanıcıyı tam olarak nereye tıklayacağına yönlendirecek bir eğitim oluşturmak istiyorum. Ben ile tüm ekranı kaplayacak şekilde çalışıyorum <div>bir hariç tüm öğeleri loş hangi belirli bir bölgedeki sabit olduğunu width, height, topve left.

Sorun şu ki, ebeveynleri background-color(aynı zamanda şeffaf olan) "iptal etmenin" bir yolunu bulamıyorum .

Aşağıda kırpılan kısımda , ebeveynininki de dahil olmak üzere holehiç olmaması gereken div background-colorvar.

Bu hiç başarılabilir mi? Herhangi bir fikir?

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

Snippet'i genişlet

İşte başarmaya çalıştığım şeyin bir örnek görüntüsü:

Question 2

Bunu sadece biriyle yapabilir divve bir verebilirsiniz box-shadow.

DÜZENLEME: @Nick Shvelidze'nin belirttiği gibi, eklemeyi düşünmelisinizpointer-events: none

@Prinzhorn'un önerdiği gibi katma vmaxdeğerbox-shadow

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>

Snippet'i genişlet

Question 3

İhtiyaç duyduğunuz yerde delik bulunan bir yolla dolu bir SVG oluşturabilirsiniz. Ama sanırım tıklamaları işlemek için bir yol bulmanız gerekenden daha fazlası, çünkü bunların tümü üst üste yerleştirilmiş svg'yi hedef alacak. Ben document.getElementFromPointburada size yardımcı olabilirim. mdn

Question 4

Bu, @ VilleKoo'nun cevabına benzer şekilde, ancak bir sınırla yapılabilir.

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>

Snippet'i genişlet

Question 5

VilleKoo'nun cevabında olduğu gibi CSS outlineözelliğini kullanarak da aynı sonuca ulaşabilirsiniz . Mükemmel bir tarayıcı desteğine sahiptir (ve IE8 + 'da da çalışır). Anahatlar, kenarlıklarla aynı sözdizimine sahiptir, ancak sınırdan farklı olarak yer kaplamazlar, içeriğin üzerine çizilirler.

Ayrıca IE9 + için 99999pxile değiştirebilirsiniz calc(100 * (1vh + 1vw - 1vmin)).

Bu yaklaşımın dezavantajı outlineetkilenmemesidir 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>

Snippet'i genişlet

Question 6

İşte @VilleKoo css kullanan basit jQuery kodu

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>

Snippet'i genişlet

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