Làm mờ toàn bộ màn hình ngoại trừ một khu vực cố định?

Question 1

Tôi muốn tạo một hướng dẫn sẽ dẫn người dùng chính xác nơi để nhấp. Tôi đang cố gắng để trang trải toàn bộ màn hình với một <div>mà sẽ mờ tất cả các yếu tố ngoại trừ một khu vực cụ thể mà là ở cố định width, height, topvà left.

Vấn đề là, tôi không thể tìm cách "hủy" của phụ huynh background-color(mà cũng là minh bạch).

Trong hình cắt bên dưới, holelà div được cho là không có bất kỳ background-color, bao gồm cả cha mẹ của nó.

Điều này có thể được thực hiện ở tất cả? Có ý kiến gì không?

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

Mở rộng đoạn mã

Đây là hình ảnh mô phỏng về những gì tôi đang cố gắng đạt được:

Question 2

Bạn có thể làm điều đó chỉ với một divvà cho nó một box-shadow.

CHỈNH SỬA: như @Nick Shvelidze đã chỉ ra, bạn nên cân nhắc thêmpointer-events: none

vmaxGiá trị gia tăng cho box-shadownhư @Prinzhorn đề xuất

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>

Mở rộng đoạn mã

Question 3

Bạn có thể tạo một SVG được lấp đầy bằng một đường dẫn có lỗ mà bạn cần. Nhưng tôi đoán bạn cần phải tìm cách xử lý các nhấp chuột, vì tất cả chúng sẽ được nhắm mục tiêu đến svg được phủ lên. Tôi điều document.getElementFromPointcó thể giúp bạn ở đây. mdn

Question 4

Điều này cũng có thể được thực hiện tương tự như câu trả lời của @ VilleKoo, nhưng có đường viền.

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>

Mở rộng đoạn mã

Question 5

Bạn có thể đạt được điều tương tự như trong câu trả lời của VilleKoo bằng cách sử dụng thuộc outlinetính CSS . Nó có hỗ trợ trình duyệt tuyệt vời (và cũng hoạt động trong IE8 +). Đường viền có cùng cú pháp với đường viền, nhưng không giống như đường viền, chúng không chiếm không gian, chúng được vẽ phía trên nội dung.

Ngoài ra đối với IE9 + bạn có thể thay thế 99999pxbằng calc(100 * (1vh + 1vw - 1vmin)).

Bất lợi của phương pháp này outlinelà không bị ảnh hưởng bởi border-radius.

Bản giới thiệu:

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>

Mở rộng đoạn mã

Question 6

Đây là mã jQuery đơn giản sử dụng @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>

Mở rộng đoạn mã

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