除了一个元素之外,如何使页面"熄灭"

Question

我不是真的在寻求我的代码帮助,我更想问,你是怎么做到的？

当你点击我的div时,屏幕会变黑,但是我希望我的div下面仍然显示为正常,但是剩下的区域会变黑.

function lightsout() {
  document.getElementById("lightsout").style.visibility = "visible";
}

<div style="width:100px;height:100px;border:2px solid blue" onclick="lightsout()">Click Me</div>

<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">

Answer 1

您可以使用box-shadow属性来实现此效果.

更新了代码

function lightsout() {
  document.getElementById("maindiv").classList.toggle("visible");
}

.visible{
box-shadow: 0 0 0 10000px #000;
position: relative;
}

body{
color: red;
}

<div style="width:100px;height:100px;border:2px solid blue; color: #000;" onclick="lightsout()" id="maindiv">Click Me</div>

Other elements on the page will be hidden...