고정 된 영역을 제외하고 전체 화면을 어둡게합니까?

Question 1

사용자가 클릭 할 위치를 정확히 안내하는 튜토리얼을 만들고 싶습니다. 나는 함께 화면 전체를 커버하기 위해 노력하고있어 <div>를 제외한 모든 요소 어두워집니다되는 특정 지역 고정에 width, height, top와 left.

문제는 부모를 "취소"하는 방법을 찾을 수 없다는 것 background-color입니다 (또한 투명 함).

아래에 hole있는 div background-color는 부모를 포함하여.

이것이 전혀 성취 될 수 있습니까? 어떤 아이디어?

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

스 니펫 확장

다음은 내가 달성하려는 것의 모형 이미지입니다.

Question 2

하나만 div으로 할 수 있고 box-shadow.

편집 : @Nick Shvelidze가 지적했듯이 추가를 고려해야합니다.pointer-events: none

@Prinzhorn이 제안한 추가 vmax가치box-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>

스 니펫 확장

Question 3

필요한 곳에 구멍이있는 경로로 채워진 SVG를 만들 수 있습니다. 그러나 클릭을 처리하는 방법을 찾는 데 필요한 것보다 더 많은 것 같습니다. 모든 클릭이 오버레이 된 svg를 대상으로하기 때문입니다. 내가 document.getElementFromPoint여기서 당신을 도울 수 있습니다. mdn

Question 4

이것은 @VilleKoo의 답변과 유사하지만 테두리가 있습니다.

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>

스 니펫 확장

Question 5

CSS 속성을 사용하여 VilleKoo의 답변 과 동일한 결과를 얻을 수 있습니다 outline. 뛰어난 브라우저 지원을 제공합니다 (IE8 +에서도 작동합니다). 윤곽선은 테두리와 구문이 동일하지만 테두리와 달리 공간을 차지하지 않고 내용 위에 그려집니다.

또한 IE9 당신이 대체 할 수있는 + 99999px와 함께 calc(100 * (1vh + 1vw - 1vmin)).

이 방법의 단점은 있습니다 outline에 의해 영향을받지 않습니다 border-radius.

데모:

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>

스 니펫 확장

Question 6

다음은 @VilleKoo css를 사용하는 간단한 jQuery 코드입니다.

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>

스 니펫 확장

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