应将主内容区单独包裹并设为模糊目标，抽屉和遮罩层强制清除模糊，通过.offcanvas.show ~ #page-content选择器控制；需注意兄弟元素顺序、filter:none!important声明、blur值≤8px及移动端兼容性问题。
抽屉导航开启时背景内容如何模糊
Bootstrap 5 自带的 offcanvas 组件默认不会影响页面其他区域的样式，背景内容保持清晰。要实现“抽屉弹出时背景高斯模糊”，必须手动干预 body 或主内容容器的 filter 属性，并确保该效果仅在抽屉激活时生效。
为什么不能直接给 body 加 filter: blur()
直接对 body 设置 filter: blur(8px) 会导致整个页面（包括抽屉自身）都被模糊——因为 offcanvas 是 body 的子元素，且未脱离文档流（默认是 position: fixed，但仍在 body 的层叠上下文中）。结果就是菜单文字发虚、点击区域变模糊，完全不可用。
解决思路是：只模糊「抽屉背后的内容区域」，而把抽屉本身和遮罩层（.offcanvas-backdrop）放在更高层级，且不继承模糊效果。常见做法是：
- 将主内容区（如
#main-content或.container）单独包裹并设为模糊目标 - 抽屉（
.offcanvas）和遮罩层（.offcanvas-backdrop）使用backdrop-filter: none或更稳妥地——用filter: none强制清除继承 - 利用 Bootstrap 的
offcanvas.show/offcanvas.hidden事件或.offcanvas.show类切换来控制模糊开关
实际 CSS 写法与关键细节
假设你用的是默认右滑抽屉，主内容区有 id #page-content：
.offcanvas.show ~ #page-content {
filter: blur(6px);
transition: filter 0.3s ease;
}
.offcanvas,
.offcanvas-backdrop {
filter: none !important;
}
#page-content {
transition: filter 0.3s ease;
}
注意三点：
-
.offcanvas.show ~ #page-content依赖兄弟选择器，要求.offcanvas和#page-content是同级元素，且.offcanvas在前（Bootstrap 默认如此） - 必须显式写
filter: none !important给抽屉和遮罩层，否则它们可能因父级模糊而间接变糊（尤其在某些浏览器中） -
blur()值建议 ≤ 8px；超过后文字识别度急剧下降，且 iOS Safari 对大值模糊渲染异常卡顿
移动端兼容性与性能提醒
iOS Safari（尤其是 iOS 15–16）对 filter: blur() 在滚动容器中支持不稳定，可能出现闪烁或卡死。如果用户反馈抽屉打开后页面卡住，优先检查：
- 是否对
body或html应用了overflow: hidden同时又加了filter—— 这会触发 WebKit 渲染 bug - 是否在模糊区域里存在
video、iframe或 canvas 元素 —— 它们在部分 Android WebView 中无法被正确模糊，甚至导致崩溃 - 是否遗漏了
will-change: filter—— 加在#page-content上可提示浏览器提前优化，减少首次模糊的掉帧
真机测试比 DevTools 模拟更重要，特别是 iPhone SE（2nd）这类 GPU 较弱的设备，blur(4px) 已经是较安全的上限。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
