利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>全屏div</title><style>html,body { margin:0; height:100%;}#test { width:100%; height:100%; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.3; /*兼容IE8及以下版本浏览器*/ filter: alpha(opacity=30); display:none;}#log_window { width:200px; height:200px; background-color:#FF0; margin: auto; position: absolute; z-index:3; top: 0; bottom: 0; left: 0; right: 0; display:none;}</style><script>function shield(){ var s = document.getElementById("test"); s.style.display = "block"; var l = document.getElementById("log_window"); l.style.display = "block";}function cancel_shield(){ var s = document.getElementById("test"); s.style.display = "none"; var l = document.getElementById("log_window"); l.style.display = "none";}</script></head><body><a href="javascript:shield()">打开遮罩</a><div id="test"></div><div id="log_window"><a href="javascript:cancel_shield()">关闭</a></div></body></html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
