backdrop-filter 不能直接写在 .block 上，因为它只对元素背后透出的内容生效，而 .block 作为容器自身无背景可透；真正起作用的是带半透明背景和正确层叠顺序的子元素，如 .block--glass。
backdrop-filter 为什么不能直接写在 .block 上
因为 backdrop-filter 只对「元素背后透出的内容」生效，而 BEM 的 .block 通常作为容器，自身没有背景可透——它背后可能是 body、父容器或空白。如果直接给 .block 加 backdrop-filter 却没处理层级和透明度，效果必然消失。真正起作用的是「带半透明背景 + 正确层叠顺序」的子元素，比如 .block__glass 或 .block--glass 这类修改器所作用的节点。
如何用 BEM 命名定义 --glass 修改器
核心原则：修改器不改变结构，只叠加视觉行为。推荐统一在需要毛玻璃效果的元素上使用 --glass，而不是为每个组件单独造 --glass-card 或 --glass-modal。
-
.card--glass：适用于整个卡片容器需毛玻璃背景（如弹窗、侧边栏） -
.header--glass：适用于悬浮式导航栏，需透出下方滚动内容 - 避免
.card__content--glass：内容区加模糊会干扰文字可读性，且违背「背景模糊」本意 - 必须配套
background-color: rgba()和isolation: isolate（防止滤镜被父层剪裁）
--glass 修改器的标准 CSS 实现
下面这段是可直接复用的最小闭环代码，已适配 Safari 15.4+ 和 Chrome/Firefox 最新版：
.block--glass {
background-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px) saturate(1.2);
-webkit-backdrop-filter: blur(8px) saturate(1.2);
isolation: isolate;
}
<p>/<em> 深色模式下自动降模糊值，防糊成一片 </em>/
@media (prefers-color-scheme: dark) {
.block--glass {
background-color: rgba(25, 25, 25, 0.16);
backdrop-filter: blur(6px) saturate(1.1);
-webkit-backdrop-filter: blur(6px) saturate(1.1);
}
}</p>
注意：blur() 值超过 12px 在移动端易触发渲染卡顿；saturate(1.1) 是为补偿 Firefox 深色模式下偶发的灰蒙感，不是装饰性参数。
容易被忽略的 BEM 封装陷阱
BEM 不是命名游戏，封装毛玻璃时三个实际问题常被跳过：
- 未声明
isolation: isolate→ 在部分嵌套场景下，backdrop-filter会被父容器的overflow: hidden或transform截断，导致模糊失效 - 把
--glass直接加在有z-index的绝对定位元素上 → 若其父容器无层叠上下文，它会“浮”到最顶层，背后只剩空白，模糊无从谈起 - 在 JS 动态切换
--glass类时，没同步控制pointer-events→ 半透明叠加后若未设pointer-events: auto，点击可能穿透到下层
真正的复用不在 class 名有多整齐，而在每次加 --glass 时，都默认带上那四行关键样式和对应上下文约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
