如何使一個頁面「熄燈」，除了一個元素

我真的不是在尋求我的代碼的幫助，我更多地問，你是怎麼做到的？如何使一個頁面「熄燈」，除了一個元素

當您點擊我的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;">

來源

2017-03-09 Daniel Williams

您可以使用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...

來源

2017-03-09 07:22:12 Aslam

它可能無法在更大的屏幕上工作與1000px的影子 –

@UmairKhalid只是給你一個非常非常大的數字要求:) – Aslam

燁我認爲這將是完美的，如果我們使用100vw，它會根據屏幕的寬度而改變 –

您可以簡單地添加z-indexes到您的定位。給黑色區域比你的按鈕更低的z-index，但是比其他區域更高的z-index，你會得到你的效果。

此外，建議不要使用內聯樣式，因爲您的代碼通過樣式和標記分離變得更易於維護。

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

.button { 
 
    position: relative; 
 
    z-index: 10; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px solid blue; 
 
    background: white; 
 
} 
 

 
#lightsout { 
 
    position: fixed; 
 
    z-index: 5; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: gray; 
 
    visibility: hidden; 
 
} 
 
#lightsout.visible { 
 
    visibility: visible 
 
}

<div class="button" onclick="lightsout()">Click Me</div> 
 
<div id="lightsout"></div> 
 

 
Other elements are hidden.

來源

2017-03-09 07:32:08 andreas

這將需要設計的重大變化 –

我只是添加z-索引。爲什麼這是一個重大的設計變更？ – andreas

唯一的問題是我不得不開始在頁面中的每個元素上放置z-index。（我只用一個元素作爲例子） –

您可以使用CSS，

的z-index，並添加divbox背景顏色像這樣:)

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

#lightsout{ 
 
    z-index: -1 
 
}

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

 
<div id="lightsout" style="position:fixed;top:0;left:0;width:100%;height:100%;background-color:black;visibility:hidden;">http://stackoverflow.com/questions/42688925/how-to-make-a-page-lights-out-except-for-one-element#

來源

2017-03-09 07:33:30 GuaHsu

很酷，唯一的問題是隻有在頁面上只有一個元素的情況下才有效。我試圖保持簡單的例子:-) –

如何使一個頁面「熄燈」，除了一個元素

回答

相關問題