如何使用纯javascript和css（无jquery）调暗除两个同心正方形之间区域以外的整个屏幕

我知道这是一个常见问题，我已经看过许多相关的问题/答案，但我仍然无法让它发挥作用。我想调暗整个屏幕，除了某些部分。在一种情况下，不应变暗的部分是两个同心正方形之间的区域。我想要一个只使用javascript和css的解决方案。它不应该使用任何第三方库，比如jquery。我不担心旧浏览器。只要它能在最新的浏览器上运行，我就可以接受它所需要的任何css3。我还有其他一些限制——我在应用程序中使用绝对定位。所有元素都绝对定位

编辑：感谢您帮助我解答您的问题。我想我应该提到我想调暗屏幕以响应用户点击按钮之类的事件。该事件会使屏幕变暗，但我想突出显示的某些区域除外。当用户再次单击按钮时，屏幕将恢复。当屏幕变暗时，用户不能与变暗区域中的DOM元素进行任何交互

这是我的js小提琴：

HTML：

<div id="main">
    <div id="outer"></div>
    <div id="inner"></div>
    <button id="mybutton">Highlight</button>
    <div id="darkness"></div>    
</div>

#mybutton
{
position: absolute; top: 450px; left:100px; z-index:10;
}

#main {
    position: relative;
    z-index:10;   
    width:500px;
    height:500px;
    overflow:hidden;
}

#darkness
{
    z-index:5;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.fadein
{   
    background:rgba(0,0,0,0.75);
}

#outer
{
    position:absolute;
    top:10px;
    left:10px;
    width:400px;
    height:400px;
    border:2px solid red;
}

#inner
{
    position:absolute;
    top:40px;
    left:40px;
    width:340px;
    height:340px;
    border:2px solid blue;
}

JS:

var button = document.getElementById("mybutton");
button.addEventListener("click", toggle);
var ff = false;
function toggle()
{ 
    var darkness = document.getElementById("darkness");
  darkness.classList.toggle("fadein");
    if (ff)
    {
        dice.style.zIndex = originalZIndex;
        button.innerText = "Highlight";
    }
    else
    {
        dice.style.zIndex = 10;
        button.innerText = "Restore";
    }
    ff = !ff
}

---

你可以用CSS来做

html，正文{
身高：100%；
}
身体{
背景色：#999999；
}
#外{
位置：绝对位置；
宽度：200px；
高度：200px；
最高：50%；
左：50%；
左边距：-50px；
利润上限：-50px；
背景色：#44c；
}
#内{
位置：相对位置；
宽度：100px；
高度：100px；
最高：50%；
左：50%；
左边距：-50px；
利润上限：-50px；
背景色：#ffffff；
}

---

css中包含五个分区的解决方案。。 我假设内部正方形是#q5，你有一个20px的间隔；所有其他指标都可以计算

<div id="q1" class="obscure">&nbsp;</div>
<div id="q2" class="obscure">&nbsp;</div>
<div id="q3" class="obscure">&nbsp;</div>
<div id="q4" class="obscure">&nbsp;</div>
<div id="q5" class="obscure">&nbsp;</div>

有关详细信息，请参阅。

---

更通用的解决方案是在js中简单地实现我的css评论中的公式

Alessandro感谢您的解决方案。你肯定花了很多时间。我正在研究你的解决方案。在我的应用程序中，我要突出显示的区域将不时更改。基本上，我正在开发一个单页面架构的javascript游戏，其中会有一个帮助按钮，用户可以随时点击以获取帮助。根据游戏状态，屏幕的不同区域可能需要调暗。我将研究您的解决方案，但仅从外观上看，它看起来不是很灵活。若你们看我的小提琴，有并没有办法突出显示方块之间的区域。您只调用内部和外部大小为4的ObsclerWith2Square，内部正方形的左侧和右侧#内容可以是你的标签主体和#一些你的主体内容我认为只有2个正方形不是一个简单的方法。也许你可以使用透明png

#q5 { 
    width: 100px; 
    height: 100px;
    left: 50px;  
    top: 120px;
}

#q4{
    left:0px;
    width: 30px; /* #q5.left - spacebetween; ex: spacebetween=20 */
    top: 0px; bottom: 0px; 
}
#q2{
    left: 170px; /* #q5.width + 2*spacebetween + q5.width;  */
    right: 0px;
    top: 0px; bottom: 0px; 
}
#q1{
    left: 30px; /* width of q4*/
    top: 0px;
    height: 100px; /*q5.top - spacebettween*/     
    width: 140px; /* q5.width + 2*spacebetween */
}
#q3{
    left: 30px;   /* width of q4*/
    width: 140px; /* q5.width + 2*spacebetween*/
    bottom: 0px;
    top: 240px; /*q5.height + q5.top + spacebettween */     
}