背景模糊遮罩的CSS实现核心是backdrop-filter加半透明背景，需将遮罩层作为卡片直接子元素或伪元素，配合overflow:hidden、position:relative及pointer-events:none，并通过:hover控制显隐，兼容性上需用@supports降级处理。
背景模糊遮罩的 CSS 实现原理
核心不是 Bootstrap 自带功能，而是靠 backdrop-filter + 半透明背景叠加实现。Bootstrap 本身不提供“模糊遮罩”组件，但能配合其卡片结构快速搭建。关键在于：遮罩层必须是卡片的直接子元素或伪元素，且不能破坏卡片的 border-radius 和 overflow: hidden 边界。
常见错误是把模糊层放在卡片外层容器里——这样会模糊到卡片以外的内容，或者被父容器裁剪导致边缘发虚。正确做法是用 ::before 或一个 <div class="card-blur"></div> 作为卡片内部遮罩。
-
backdrop-filter: blur(10px)是关键，但需注意 Safari 需加-webkit-backdrop-filter - 遮罩层背景必须设为半透明（如
rgba(255,255,255,0.7)），纯白或纯黑会盖住底层模糊效果 - 卡片本身要加
overflow: hidden（Bootstrap 5 的.card默认已有） - 若卡片有阴影（
.shadow-*），模糊层应置于阴影内侧，否则模糊会包含阴影边缘，显得脏
在 Bootstrap 5 卡片中添加悬浮时激活遮罩
利用 Bootstrap 的 :hover 状态控制遮罩显隐，避免 JS 干预。遮罩默认隐藏，悬停时显示并启用模糊。注意：不要用 opacity: 0 → 1 动画，会导致模糊渲染不稳定；推荐用 visibility + transform 或直接控制 backdrop-filter 值。
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">内容</p>
</div>
<div class="card-blur"></div>
</div>CSS 示例：
.card-blur {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
visibility: hidden;
pointer-events: none;
}
.card:hover .card-blur {
visibility: visible;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.card > .card-blur {
z-index: 1;
}- 必须给
.card设position: relative（Bootstrap 5 默认未设，需手动加） -
pointer-events: none确保鼠标穿透遮罩，不影响卡片内按钮/链接交互 - 慎用
transition: backdrop-filter 0.3s—— 多数浏览器不支持该属性过渡，会直接跳变
兼容性与降级处理要点
backdrop-filter 在 Firefox 桌面版默认禁用（需手动开启 layout.css.backdrop-filter.enabled），移动端 iOS Safari 支持良好，Chrome/Edge 90+ 均支持。无支持时，遮罩会退化为纯色半透明层，视觉仍可用，但无模糊。
- 可用
@supports (backdrop-filter: blur(1px))包裹模糊样式，避免干扰旧浏览器渲染 - 不要依赖 JS 检测支持再加载样式——CSS 本身已具备优雅降级能力
- 若项目需强兼容 IE 或老安卓 WebView，建议完全放弃
backdrop-filter，改用高斯模糊 SVG 滤镜（性能差、维护难）或静态毛玻璃图（不灵活） - 某些 Android Chrome 版本（如 80–89）对
backdrop-filter渲染异常，表现为闪烁或卡顿，此时可加will-change: filter缓解，但慎用以免触发过多图层合成
与 Bootstrap 深色模式共存的细节
如果启用了 Bootstrap 5.3+ 的深色模式（data-bs-theme="dark"），遮罩的 rgba() 背景色需适配主题。硬编码白色会和深色背景冲突，显得突兀。
- 推荐用 CSS 变量：定义
--bs-card-blur-bg: rgba(var(--bs-body-bg-rgb), 0.7)，让遮罩自动随主题变亮/暗 - 深色模式下，
backdrop-filter对比度可能降低，可适当提高blur值（如 14px）增强层次感 - 避免在
.card-text或标题上设text-shadow，否则悬停时文字会因模糊层叠加而发虚 - 检查
.card-img-overlay类是否与模糊层冲突——它默认使用position: absolute，容易和.card-blur层叠顺序打架
实际写的时候，最常被忽略的是 .card 缺少 position: relative 导致遮罩定位错乱，以及没关掉 pointer-events 让点击失效。模糊值别贪大，10–14px 是视觉舒适区，再大反而削弱信息可读性。
