如何在Overlay遮罩层上添加文本/图片并实现点击隐藏功能？

我看了你的代码，发现核心问题是你把blur滤镜直接套在了整个#overlay容器上，导致容器里的文本也跟着被模糊了——这肯定不是你想要的效果。要在遮罩层上展示清晰的内容，我们可以把遮罩拆成两个独立部分：一个负责背景模糊的底层，一个负责承载文本/图片的顶层内容区，这样内容就不会被模糊影响了。

下面是修正后的完整代码，我标注了关键修改点：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 背景模糊遮罩层 - 只负责覆盖页面和提供模糊效果 */
        #overlay-bg {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255, 0.9);
            /* 模糊效果只作用在背景层 */
            -webkit-filter: blur(4px);
            filter: blur(4px);
            z-index: 2;
            cursor: pointer;
        }

        /* 内容容器 - 放在模糊层上方，不应用模糊 */
        #overlay-content {
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            z-index: 3; /* 确保内容在模糊层之上 */
            text-align: center;
        }

        /* 文本样式优化 */
        #overlay-text {
            font-size: 50px;
            color: #333; /* 把白色改成深色，适配浅白背景，避免看不清 */
            margin-bottom: 20px;
        }

        /* 示例图片样式，按需调整 */
        #overlay-image {
            width: 200px;
            height: auto;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <!-- 背景模糊层，点击触发隐藏 -->
    <div id="overlay-bg" onclick="hideOverlay()"></div>
    <!-- 内容层，放文本和图片 -->
    <div id="overlay-content">
        <div id="overlay-text">Overlay Text</div>
        <img id="overlay-image" src="your-image-url" alt="遮罩层展示图片">
    </div>

    <div id="main-content">
        这里是页面主体内容，页面加载后会被遮罩覆盖，点击遮罩即可显示。
    </div>

    <script>
        // 显示遮罩和内容
        function showOverlay() {
            document.getElementById("overlay-bg").style.display = "block";
            document.getElementById("overlay-content").style.display = "block";
        }

        // 隐藏遮罩和内容
        function hideOverlay() {
            document.getElementById("overlay-bg").style.display = "none";
            document.getElementById("overlay-content").style.display = "none";
        }

        // 页面加载自动显示遮罩
        window.onload = showOverlay;
    </script>
</body>
</html>

关键修改说明： #

• 拆分遮罩结构：把原来的单个#overlay拆成#overlay-bg（背景模糊层）和#overlay-content（内容层），模糊效果只作用在背景上，内容保持清晰。
• 层级调整：给内容层设置更高的z-index（3），确保它在模糊层（z-index:2）之上，不会被遮挡。
• 文本可见性优化：把文本颜色从白色改成深色，适配你设置的浅白色遮罩背景，避免文字看不清。
• 修复代码错误：你原来的代码里重复写了body标签，我已经帮你修正了这个问题。
• 添加图片支持：新增了图片容器，替换src为你的图片地址就能直接用。

内容的提问来源于stack exchange，提问作者M. Max