点击链接实现网页整页背景模糊效果的技术求助

问题说明 #

需要实现点击跳转链接时，当前页面整页呈现模糊状态，跳转后的目标页面也保持相同的模糊背景。现有方案通过container容器包裹导航并添加blur类，但由于背景图片设置在body上，无法实现整页模糊。

修改方案 #

1. 调整页面结构（主页面） #

将页面内容与背景分离，创建独立的全屏背景层，同时把所有内容放入#content容器中，方便统一控制模糊效果。另外需要修改跳转逻辑，延迟跳转以显示模糊动画：

<body>
    <!-- 全屏背景层 -->
    <div class="background"></div>
    <!-- 所有内容容器 -->
    <div id="content">
        <div class="container">
            <header>
                <h2 class="logo">Logo</h2>
                <nav class="navigation">
                    <!-- 自定义跳转函数，先模糊再跳转 -->
                    <a href="game.html" onclick="return toggleAndRedirect()">Play</a>
                    <a href="#">Book</a>
                    <a href="#">Memo</a>
                    <a href="#">Quote</a>
                    <button id='playSound' onclick="sound()">Music: Off</button>
                </nav>
            </header>
        </div>
        <audio id="audio" loop>
            <source src="September.mp3" type="audio/mpeg">
        </audio>
    </div>

    <script>
        function sound(){
            var web_audio = document.getElementById('audio')
            if(web_audio.paused){
                audio.play()
                playSound.innerHTML = 'Music: On'
            } else {
                audio.pause()
                playSound.innerHTML = 'Music: Off'
            }
        }

        function toggleAndRedirect() {
            // 给内容容器添加模糊类
            document.getElementById('content').classList.add('active');
            // 延迟300ms跳转，确保模糊效果可见
            setTimeout(() => {
                window.location.href = 'game.html';
            }, 300);
            // 阻止默认立即跳转行为
            return false;
        }
    </script>
</body>

2. 调整CSS样式 #

将body的背景样式移到独立的.background层，设置全屏并置于内容下方；同时给#content容器添加过渡效果，点击时通过active类实现模糊：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

body {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* 全屏背景层，独立于内容 */
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('art.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* 内容容器，默认无模糊，添加active类后触发模糊 */
#content {
    transition: filter 0.3s ease;
}

#content.active {
    filter: blur(20px);
}

/* 目标页面默认模糊样式 */
body.target-page #content {
    filter: blur(5px);
}

header {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    padding: 20px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}

.logo {
    font-size: 2em;
    color: #fff;
    user-select: none;
}

.navigation a {
    position: relative;
    font-size: 1.1em;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 40px;
}

.navigation a::after {
    content: '';
    position: absolute;
    width: 100%;
    height:3px;
    background: #fff;
    border-radius: 5px;
    transform-origin: right;
    left:0;
    bottom: -6px;
    transform: scaleX(0);
    transition: transform .5s;
}

.navigation a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.navigation #playSound {
    width: 130px;
    height: 50px;
    background: transparent;
    border: 2px solid #fff;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    color: #fff;
    font-weight: 500;
    margin-left: 40px;
}

.navigation #playSound:hover {
    background: #fff;
    color: #162938;
}

3. 修改目标页面HTML #

给目标页面的body添加target-page类，让内容容器默认呈现模糊效果，同时保留原有功能：

<body class="target-page">
    <div class="background"></div>
    <div id="content">
        <header>
            <h2 class="logo">Logo</h2>
            <nav class="navigation">
                <a href="game.html">Play</a>
                <a href="#">Book</a>
                <a href="#">Memo</a>
                <a href="#">Quote</a>
                <button id='playSound' onclick="sound()">Music: Off</button>
            </nav>
        </header>
    </div>

    <audio id="audio" loop>
        <source src="September.mp3" type="audio/mpeg">
    </audio>

    <script>
        function sound(){
            var web_audio = document.getElementById('audio')
            if(web_audio.paused){
                audio.play()
                playSound.innerHTML = 'Music: On'
            } else {
                audio.pause()
                playSound.innerHTML = 'Music: Off'
            }
        }
    </script>
</body>

关键说明 #

• 背景与内容分离：通过独立的背景层，解决了body背景无法随内容模糊的问题，同时可以单独控制背景的模糊效果（如需）。
• 延迟跳转：默认跳转行为会立即刷新页面，看不到模糊动画，通过setTimeout延迟300ms跳转，确保用户能看到模糊过渡效果。
• 目标页面模糊：通过给body添加类，实现目标页面加载时就呈现模糊状态，保持视觉一致性。

内容的提问来源于stack exchange，提问作者Potatostudies