Bootstrap 不原生支持 background-blur，需手动用 backdrop-filter 实现毛玻璃效果；关键在于容器设半透背景、启用滤镜、确保背后有可模糊内容，并注意兼容性与布局限制。
background-blur 在 Bootstrap 中不原生支持
bootstrap 本身没有 bg-blur 这类工具类，所谓“模糊背景”得靠 css 的 backdrop-filter 手动实现，和 bootstrap 的栅格、容器组件是正交关系——它不冲突，但也不帮你封装。
你用 container 或 container-fluid 包住内容后，模糊效果得加在**容器自身或其伪元素/子层**上，不是加在“背景图”或“背景色”那种传统方式里。
用 backdrop-filter 实现容器毛玻璃效果
核心是给容器设半透背景 + 启用滤镜。注意：该属性对父级背景生效（即“透过容器看后面的内容”），所以容器必须有透明度或透明背景，且背后得有可被模糊的内容（比如 body 背景、固定定位的图层）。
- 必须设置
background-color带 alpha（如rgba(255,255,255,0.7)），纯transparent会失效 - 必须写
-webkit-backdrop-filter和backdrop-filter，Safari 和旧 Chrome 只认前者 - 容器不能有
overflow: hidden（否则裁掉滤镜溢出区域，模糊变弱甚至消失） - 如果容器内有阴影或边框，建议用
border-radius配合，否则直角边缘模糊不自然
.blur-container {
background-color: rgba(255, 255, 255, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 12px;
}
常见失败原因：iOS Safari 和部分安卓 WebView 不显示模糊
backdrop-filter 在 iOS Safari 16.4+ 才稳定支持，更早版本要么完全不渲染，要么只在 position: fixed 元素上生效；部分安卓 WebView（尤其 Android 10 及以下）直接忽略该声明。
- 检查是否误用了
filter: blur()—— 那是对整个元素做图像处理，不是“背景毛玻璃” - 确认容器没被包裹在
transform或will-change触发的合成层里，某些场景会禁用backdrop-filter - 不要指望
background-image: url(...)被模糊——backdrop-filter模糊的是“容器后面的页面内容”，不是它自己的背景图
兼容性兜底：渐进增强而非降级替代
没有真正等价的 CSS 替代方案。试图用高斯模糊后的 PNG 当背景图，会丢失响应性、缩放失真，且无法随页面滚动/交互动态变化。
- 优先确保非模糊态可用：用
rgba()半透背景作为基础样式，再叠加backdrop-filter - 用
@supports (backdrop-filter: blur(1px))包裹模糊规则，避免老浏览器解析报错或干扰布局 - 别在
:before伪元素上硬套模糊——它没有“背后内容”，滤镜无效；必须作用于有视觉上下文的元素本身
真正难的不是写那三行 CSS，而是想清楚：你要模糊的“背景”，到底是谁的背景？body？一个 fixed 图层？还是某个 z-index 更低的兄弟元素？搞错这一层，代码再对也出不来效果。
