返回
UI · №21 · SPECIMEN
遮罩层Scrim
弹窗后面那层黑半透明的黑色背景蒙层点一下外面就关掉的那个背景
LIVE SPECIMEN真的能玩，点点看
先看结论
把弹窗和页面隔开的半透明层，暗示「下面的内容暂时不能碰」，通常点击它可以关闭弹窗。
- 适合
- 想单独调整弹窗背后那层黑的颜色、透明度、模糊效果，或控制「点外面关不关弹窗」时。
- 不适合
- 想改弹窗内容本身时——那说 Modal / Dialog，不是 Scrim。
直接发给 agent
Add a scrim behind the dialog: semi-transparent black (rgba(0,0,0,.5)) covering the full viewport, clicking the scrim closes the dialog with a 150ms fade-out.已于 2026-07-17 实测通过
技术标注2 项
- web
- ::backdrop（配合 <dialog>）
- react
- <Dialog.Overlay>（Radix 等组件库）
详细说明
遮罩层是模态交互里最容易「看得见却叫不出名字」的元素之一。它的存在感全靠那层半透明的黑，但它和弹窗本体是两个东西——分清这一点，你才能精准地让 agent 只改「那层黑」而不动弹窗内容。