移动端网站下拉菜单无法应用模糊效果的技术求助

问题现象 #

为移动端的.header和.menu-content组件都设置了backdrop-filter: blur(10px)背景模糊效果，但实际只有其中一个能生效——保留header的模糊时，menu-content的模糊失效；移除header的模糊后，menu-content的模糊正常显示，反之亦然。

代码片段 #

CSS（移动端媒体查询） #

@media screen and (max-width: 767px) {
    .header {
        position: fixed;
        width: 100%;
        z-index: 2; 
        background-color: rgba(34, 35, 37, 0.8); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        transition: all 0.3s;
    }
    
    .menu-content {
        position: absolute;
        top: 100%; 
        left: 0;
        right: 0;
        background-color: rgba(34, 35, 37, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
        overflow: hidden;
        transition: max-height 0.5s ease;
        max-height: 0; 
        z-index: 3;
    }
}

HTML #

<body>
    <div id="particles-js"></div>
    <header class="header">
        <a href="/" class="josefin-sans-header">OMNIA</a>
        <div class="menu-button" onclick="toggleMenu()">
            <div class="menu-line top"></div>
            <div class="menu-line middle"></div>
            <div class="menu-line bottom"></div>
        </div>
        <nav class="menu-content" id="menuContent">
            <div class="menu-item pt-sans-regular-options" id="premium-option">Premium♾️</div>
            <div class="menu-item pt-sans-regular-options">Commands</div>
            <a href="https://discord.com/api/oauth2/authorize?client_id=595589012270612508&permissions=8&scope=bot%20applications.commands" class="menu-item pt-sans-regular-options" target="_blank">Invite Bot</a>
            <a href="https://discord.gg/DajNSdYq" class="menu-item pt-sans-regular-options" target="_blank">Help</a>
            <div class="menu-item pt-sans-regular-options">Authorization</div>
        </nav>
    </header>    
    <section class="home geologica-title">
        <div class="content">
            <h2> OMNIA </h2>
        </div>
    </section>
    <div class="additional-rectangle">
        <div class="server-stats">
            <div class="server-count-text geologica-title" id="server-count-text">Loading...</div>
            <div class="avatars" id="server-avatars">
                <div class="avatar"></div>
                <div class="avatar"></div>
                <div class="avatar"></div>
                <div class="avatar"></div>
                <div class="avatar"></div>
            </div>
        </div>
    </div>
    <div class="additional-rectangle2">
    </div>
</body>

JS #

function toggleMenu() {
    var menuButton = document.querySelector('.menu-button');
    var menuContent = document.getElementById('menuContent');
    menuButton.classList.toggle('x-active');
    
    if (menuContent.style.maxHeight) {
        menuContent.style.maxHeight = null;
    } else {
        menuContent.style.maxHeight = menuContent.scrollHeight + "px";
    }
}

问题原因 #

backdrop-filter的模糊效果是对元素后方的可见内容生效的。当前.menu-content是.header的子元素，它的后方内容其实是.header的背景（而非页面底层的particles-js或其他内容），但.header本身带有半透明背景，导致.menu-content的模糊效果无法作用到页面底层内容，看起来就像失效了。同时父子元素的z-index层级关系也会限制子元素的模糊作用范围。

解决方案 #

将.menu-content从.header中移出，作为body的直接子元素，调整定位使其与header对齐，这样它的后方就是页面底层内容，模糊效果就能正常生效。

修改后的代码 #

HTML（调整menu-content位置）

<body>
    <div id="particles-js"></div>
    <header class="header">
        <a href="/" class="josefin-sans-header">OMNIA</a>
        <div class="menu-button" onclick="toggleMenu()">
            <div class="menu-line top"></div>
            <div class="menu-line middle"></div>
            <div class="menu-line bottom"></div>
        </div>
    </header>
    <!-- 将menu-content移到header外 -->
    <nav class="menu-content" id="menuContent">
        <div class="menu-item pt-sans-regular-options" id="premium-option">Premium♾️</div>
        <div class="menu-item pt-sans-regular-options">Commands</div>
        <a href="https://discord.com/api/oauth2/authorize?client_id=595589012270612508&permissions=8&scope=bot%20applications.commands" class="menu-item pt-sans-regular-options" target="_blank">Invite Bot</a>
        <a href="https://discord.gg/DajNSdYq" class="menu-item pt-sans-regular-options" target="_blank">Help</a>
        <div class="menu-item pt-sans-regular-options">Authorization</div>
    </nav>    
    <section class="home geologica-title">
        <div class="content">
            <h2> OMNIA </h2>
        </div>
    </section>
    <!-- 其余内容不变 -->
</body>

CSS（调整menu-content定位）

@media screen and (max-width: 767px) {
    .header {
        /* 原有样式不变 */
        position: fixed;
        width: 100%;
        z-index: 2; 
        background-color: rgba(34, 35, 37, 0.8); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        transition: all 0.3s;
    }
    
    .menu-content {
        /* 修改position为fixed，top设为header的高度（可根据实际布局调整数值） */
        position: fixed;
        top: 60px; 
        left: 0;
        right: 0;
        background-color: rgba(34, 35, 37, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
        overflow: hidden;
        transition: max-height 0.5s ease;
        max-height: 0; 
        z-index: 3;
    }
}

JS（无需修改）

function toggleMenu() {
    var menuButton = document.querySelector('.menu-button');
    var menuContent = document.getElementById('menuContent');
    menuButton.classList.toggle('x-active');
    
    if (menuContent.style.maxHeight) {
        menuContent.style.maxHeight = null;
    } else {
        menuContent.style.maxHeight = menuContent.scrollHeight + "px";
    }
}

调整后，.header和.menu-content的背景模糊效果即可同时正常显示。

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