我知道这是一个常见问题，我已经查看了许多相关问题/答案，但我仍然无法让它工作。除了某些部分，我想调暗整个屏幕。在一种情况下，不应变暗的部分是两个同心正方形之间的区域。我想要一个只使用 javascript 和 css 的解决方案。它不应该使用任何像 jquery 这样的第三方库。我不担心旧浏览器。只要它适用于最新的浏览器，我就可以接受它需要的任何 css3。我有一些其他限制 - 我在我的应用程序中使用绝对定位。所有元素都是绝对定位的。
编辑:感谢您帮我解答。我想我应该提到我想调暗屏幕以响应用户单击按钮等事件。除了我想突出显示的某些区域外，该事件使屏幕变暗。当用户再次点击该按钮时，屏幕恢复。当屏幕变暗时，用户不应与变暗区域中的 DOM 元素进行任何交互。
这是我的 js fiddle :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/