我知道这是一个常见问题，我已经查看了许多相关的问题/答案，但仍然无法正常工作。除了某些部分，我想使整个屏幕变暗。在一种情况下，不应变暗的部分是两个同心正方形之间的区域。我想要一个仅使用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
}
最佳答案
您可以使用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>关于javascript - 如何使用纯javascript和css使除两个同心正方形之间的区域以外的整个屏幕变暗(无jQuery)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27283145/