本文介绍如何使用JavaScript结合CSS实现图片的透明遮罩层展示效果。通过定义半透明背景层与内容层的层级关系，实现点击触发图片显示的功能。代码包含HTML结构、CSS样式及交互逻辑，适用于前端图片预览场景。
透明遮罩层图片展示实现
<html> <head> <title>JavaScript Data Access Test</title> <style> .alphaDiv{ z-index:100; width:100%; height:100%; opacity:0.5; background:#666666; top:0; left:0; position:absolute; filter:alpha(opacity=50); } .top-div{ z-index:101; border:1px solid #333; padding:2px; background:#eee; position:absolute; } a{ outline:none; } </style> </head> <body class="body"> <p>Click here to show the pic one.<br> Click here to show the pic two.<br>Click me </p> </body> </html> 注意：引入外部JavaScript文件后，需要刷新页面才能执行相关代码。
请注意示例中的图片地址，实际使用时请替换为正确的图片路径。