其实它和全局遮罩是一样的思想,只不过就要用position了
<script type="text/javascript"> function shade(){ var p = document.getElementById("shade"); p.className = "d"; p.style.display = "block"; } function shadeDisplay(){ var p = document.getElementById("shade"); p.style.display = "none"; } </script> <style type="text/css"> #s{ width:600px; height:500px; margin:0px auto; z-index:999; position:relative;/*使子元素的坐标以父元素的左上角坐标为远点(0,0)*/ border:1px solid #000; } .d{ width:600px; height:500px; position:absolute; left:0px; top:0px; background-color:green; -moz-opacity:0.5;/*Firefox*/ opacity:0.5;/*Opera*/ filter:alpha(opacity=50); /*IE*/ } </style> </head> <body> <div id="s"> <a href="javascript:shade()">shade局部遮罩</a> <div id="shade"></div> </div> <a href="javascript:shadeDisplay()">shade遮罩消失</a> </body>