Bootstrap 5 Offcanvas导航菜单模糊背景实现失效问题

问题描述 #

使用Bootstrap v5.2开发时，需要实现侧边栏弹出时的背景模糊效果，效果表现为侧边栏打开时，后方页面内容整体呈现高斯模糊的毛玻璃观感。

最初尝试直接给.offcanvas-backdrop添加backdrop-filter属性未生效，代码如下：

.offcanvas-backdrop {
    backdrop-filter: blur(10px); 
    -webkit-filter: blur(10px);
}

后续尝试改用普通filter搭配SVG滤镜实现，依然没有效果：

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="10" />
  </filter>
</svg>

.offcanvas-backdrop{
    filter: blur(10px);
    -webkit-filter:blur(10px);
    filter: url($blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}

失效原因 #

• 核心问题1：Bootstrap默认给.offcanvas-backdrop设置了半透明黑色实色背景，会直接盖住后方内容，模糊效果无法透出
• 核心问题2：属性和前缀写错：-webkit-filter是普通filter的webkit内核兼容前缀，不是backdrop-filter的兼容前缀；且普通filter只会模糊元素自身的内容，无法模糊元素后方的页面内容，属于属性选型错误
• 额外可能：部分全局样式（比如给html/body设置了transform属性）会创建新的层叠上下文，导致backdrop-filter渲染失效

正确实现代码 #

不需要额外添加SVG滤镜，直接写入以下CSS覆盖默认样式即可：

/* 覆盖Bootstrap默认遮罩层样式 */
.offcanvas-backdrop {
  /* 移除默认的半透明实色背景，这一步是效果生效的必要前提 */
  background-color: transparent !important;
  /* 正确添加背景模糊属性和对应兼容前缀 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 可选样式：模糊效果上叠加轻微暗化层，更贴近常规毛玻璃侧边栏的设计观感 */
.offcanvas-backdrop.show {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

排查注意点 #

• 不要给.offcanvas-backdrop使用普通filter属性，该属性只能模糊元素自身内容，完全无法实现元素后方内容的模糊效果
• 如果添加代码后依然不生效，检查全局CSS中是否存在给html、body、页面根容器设置transform、will-change: transform的代码，这类属性会创建独立渲染层，打破backdrop-filter的层叠渲染逻辑
• 模糊半径可以根据实际设计需求调整，常规场景下6-12px的模糊值视觉效果比较舒适

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