移动端打开navbar导航栏时如何实现整个body背景模糊效果

以下为两种可行实现方案，优先推荐纯CSS方案，无需修改原有HTML结构、无需额外编写JS逻辑。

方案1：纯CSS实现（推荐，适配所有现代移动端浏览器） #

依托Bootstrap折叠菜单展开时自动添加show类的原生特性，通过伪元素生成全屏模糊遮罩即可，将以下代码加入你的移动端媒体查询中：

@media (max-width: 576px) {
  /* 原有样式保留 */
  .navbar {
    padding-left: 0;
    padding-right: 0;
    /* 新增：保证导航层级高于页面内容 */
    position: relative;
    z-index: 1030;
  }
  .navbar-dark .navbar-brand {
    font-size: 24px;
  }
  #navbarCollapse {
    background-color: #29292a;
    padding: 1rem 0;
    position: relative;
    /* 新增：过渡动画，效果更顺滑 */
    transition: all 0.3s ease;
  }
  /* 新增：菜单展开时触发的全屏模糊遮罩 */
  #navbarCollapse.show::before {
    content: "";
    position: fixed;
    inset: 0; /* 等同于top/right/bottom/left都设为0，全屏覆盖 */
    backdrop-filter: blur(8px); /* 模糊程度可自行调整，数值越大模糊效果越强 */
    background-color: rgba(0, 0, 0, 0.2); /* 半透明黑色遮罩，匹配示例图效果，可调整透明度 */
    z-index: -1; /* 遮罩放在菜单下方，不影响菜单点击交互 */
    pointer-events: none; /* 避免遮罩拦截页面其他操作 */
    transition: all 0.3s ease; /* 模糊效果的过渡动画 */
  }
}

特性说明： #

• 仅当菜单展开（带有show类）时才会显示模糊遮罩，收起时自动消失
• 遮罩默认全屏覆盖，直接实现整个body背景的模糊效果
• 所有现代移动端浏览器（Chrome、Safari、微信内置浏览器等）均支持backdrop-filter属性，无需担心兼容性问题

方案2：JS+CSS实现（兼容更老旧的设备） #

如果需要适配非常老的移动端设备，可通过JS监听导航的展开/收起事件，给页面内容添加模糊效果：

第一步：添加JS代码（依赖Bootstrap自带的jQuery） #

$(function() {
  // 导航展开时给body添加标记类
  $('#navbarCollapse').on('show.bs.collapse', function() {
    if ($(window).width() <= 576) {
      $('body').addClass('navbar-open');
    }
  });
  // 导航收起时移除标记类
  $('#navbarCollapse').on('hide.bs.collapse', function() {
    $('body').removeClass('navbar-open');
  });
});

第二步：添加对应CSS样式 #

@media (max-width: 576px) {
  .navbar {
    position: relative;
    z-index: 1030;
  }
  /* 注意：.page-container需要替换为你页面中除导航外所有内容的外层容器类名 */
  body.navbar-open .page-container {
    filter: blur(8px);
    transition: filter 0.3s ease;
  }
}

可选优化 #

你可以调整blur()的数值（推荐4-12px区间）、rgba的透明度，匹配你想要的视觉效果；也可以将导航的背景色调整为半透明，和模糊效果更融合。

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