我想知道如何将叠加层变成按钮？我不需要的是一个手动按下以显示覆盖的按钮。我想要的是，当一个人进入浏览器时，它会自动出现在其中，并且要移除它，他们可以在屏幕上的任意位置单击，然后消失，让他们与页面本身进行交互。
下面是叠加层本身的代码，但是我需要将其合并到其中以使其成为可访问的虚构按钮吗？
...
<style>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9);
}
#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}
#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}
</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>
...
如果将叠加层设置为具有position: fixed和适当的z-index，则默认情况下它将覆盖该页面。
然后在其上声明一个单击侦听器，以将其显示设置为无，或将其从DOM中删除。
仅不要将其用作真实内容的容器
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#overlay').addEventListener('click', clickEvent => {
clickEvent.target.classList.add('invisible');
});
});#overlay {
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
background-color: rgba(100, 100, 100, 0.5);
padding: 4em 10%;
text-align: center;
font-weight: bold;
}
#overlay.invisible {
display: none;
}<div id="overlay">
Click me to interact
</div>
<div>
This is the real content <a href="https://stackoverflow.com/questions/61034197/how-to-turn-an-overlay-into-a-giant-button">But you can't click me without closing the overlay</a>
</div>