W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; } </style> </head> <body> <div id="overlay" onclick="off()"></div> <div style="padding:20px"> <h2>叠加层</h2> <p>为页面内容添加叠加效果（100% 宽度和高度，带有 50% 不透明度的黑色背景）。</p> <button onclick="on()">开启叠加效果</button> </div> <script> function on() { document.getElementById("overlay").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; } </script> </body> </html>