我有一个网站，其 div 上有一个幻灯片，当用户离开所需区域时会触发该幻灯片。我做了一个 jsfiddle 来展示一下。
<body class="overlay">
<input>
</body>
.overlay{
position: absolute;
opacity: ;
width: 100%;
height: 100%;
background-color: #373737;
}
目前我知道我可以更改不透明度并且输入会变暗，但我不想那样。正如我当前的应用程序显示的 div 一样，它应该覆盖它。但问题是仍然可以看到输入字段。
我知道您可以在窗口事件未激活的地方使用它。因此，有人无法在输入内部单击，但这无济于事，因为他们需要能够单击弹出的 div 上的关闭按钮。
我想要一种能够将叠加层附加到主体的方法，同时还让它隐藏下面的所有输入字段。我试着搜索了很多，但没有什么是准确的。
我只使用 jquery 和 css。所以请尝试在这些工作中有所作为。谢谢!
最佳答案
Solution: 1
你可以像这样使用:after
body:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #373737;
left: 0;
top: 0;
opacity: 0.9;
}<body>
<input type="text" />
</body>
Solution: 2
您可以像这样使用另一个名为 .overlay 的 div。您可以根据您的要求使用jQuery显示或隐藏div
.overlay{
position: absolute;
width: 100%;
height: 100%;
background-color: #373737;
left: 0;
top: 0;
opacity: 0.9;
}<body>
<div class="overlay"></div>
<input type="text" />
</body> 关于jquery - 使用叠加层覆盖正文和输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51079961/