直接用 backdrop-filter + dialog 或自定义遮罩层就能实现，但必须处理好层级、滚动禁用和 safari 兼容性这三件事：dialog::backdrop 上设 backdrop-filter: blur(6px) 并配 rgba 背景，safari 需加 -webkit 前缀，轮播图容器需 isolation: isolate 防干扰，且须显式控制 z-index 与 stacking context。
直接用 backdrop-filter + dialog 或自定义遮罩层就能实现，但必须处理好层级、滚动禁用和 Safari 兼容性这三件事。
用 backdrop-filter 做模糊遮罩最简单
现代浏览器（Chrome 97+、Firefox 103+、Edge 107+）支持 backdrop-filter: blur(8px)，它能对「背后内容」做高斯模糊，比用半透明色块更真实。关键不是加在轮播图上，而是加在弹出层的遮罩层（::backdrop 或独立 div.mask）上：
-
dialog::backdrop上设backdrop-filter: blur(6px)，同时保留background-color: rgba(0,0,0,0.4)防止背景过亮 - 不用
dialog时，遮罩层div.mask必须用position: fixed，且不能设background为纯色——否则会盖住模糊效果；应改用background: transparent - 轮播图容器本身要设
isolation: isolate，否则父级模糊可能意外影响内部图片渲染
dialog 元素打开即带遮罩，但 Safari 15.4 以下不支持
原生 dialog 是最省事的选择：showModal() 自动挂载 ::backdrop 并禁用背景滚动，无需手动写 overflow: hidden。但 Safari 15.4 之前完全无 ::backdrop，且不触发 showModal() 的焦点捕获逻辑。
- 检测支持：用
if ('showModal' in HTMLDialogElement.prototype)判断，不支持时 fallback 到div#mask+aria-modal="true" - Safari 15.4–16.6 存在
::backdrop不响应backdrop-filter的 bug，需额外加-webkit-backdrop-filter: blur(6px) - 打开后必须手动调
dialog.focus()，否则键盘 Tab 无法进入弹窗内元素
轮播图本体别被遮罩“吃掉”层级
模糊遮罩层（z-index: 1000）和轮播图容器（z-index: 999）之间容易因 stacking context 断裂导致图片被遮罩盖住——尤其当轮播图父容器用了 transform、opacity 或 <code>will-change 时。
- 检查轮播图最外层是否意外创建了新 stacking context：用 DevTools 的 Layers 面板看是否有「Painted Layer」异常提升
- 确保轮播图容器的
z-index显式设为数值（如z-index: 2000），不要依赖默认值 - 若用了 CSS 动画切换图片，避免在
.carousel-inner上设transform: translateX(...)同时又设z-index—— 改用transform: translateZ(0)强制提升层，再单独控z-index
真正难的不是加模糊，而是让模糊只作用于背景、不干扰轮播图交互，且在各种旧 Safari 下不白屏或失焦——这些细节不调试到真机根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
