如何使用純javascript和css使除兩個同心正方形之間的區域以外的整個屏幕變暗（無jQuery）

Question

我知道這是一個經常被問到的問題，我查看了許多相關的問題/答案，但仍然無法正常工作。 除了某些部分，我想使整個屏幕變暗。 在一種情況下，不應變暗的部分是兩個同心正方形之間的區域。 我想要一個僅使用javascript和CSS的解決方案。 它不應使用任何第三方庫（如jquery）。 我不擔心舊的瀏覽器。 只要它能在最新的瀏覽器上運行，我都可以使用它所需的css3。 我有一些其他限制-我在應用中使用絕對定位。 所有元素都絕對定位。

編輯：感謝您幫助我與您的答案。 我想我應該提到我想響應用戶單擊按鈕等事件使屏幕變暗。 該事件使屏幕變暗，但我要突出顯示的某些區域除外。 當用戶再次單擊該按鈕時，屏幕將恢復。 當屏幕變暗時，用戶不應與變暗區域中的DOM元素進行任何交互。

這是我的js小提琴： http : //jsfiddle.net/z1Lj7h90/

HTML ：

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

CSS ：

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

Answer 1

您可以使用CSS來實現。

 html, body { height: 100%; } body { background-color: #999999; } #outer{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background-color: #44c; } #inner{ position: relative; width: 100px; height: 100px; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background-color: #ffffff; }

 <body> <div id="outer"> <div id="inner"></div> </div> </body>

Answer 2

我假設內部正方形是＃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>

現在，q1在北部，q3在南部； q2和q4橫向

#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 */     
}

有關詳細信息，請參見http://jsfiddle.net/alemarch/czpksfdd/ 。 一個更通用的解決方案是在js中輕松實現我的CSS注釋中的公式

如何使用純javascript和css使除兩個同心正方形之間的區域以外的整個屏幕變暗（無jQuery）

問題描述

2 個解決方案

解決方案1
1 2014-12-03 23:06:06

解決方案2
1 2014-12-03 23:30:36

如何使用純javascript和css使除兩個同心正方形之間的區域以外的整個屏幕變暗（無jQuery）

問題描述

2 個解決方案

解決方案1 1 2014-12-03 23:06:06

解決方案2 1 2014-12-03 23:30:36

解決方案1
1 2014-12-03 23:06:06

解決方案2
1 2014-12-03 23:30:36