Scrim (Backdrop / Overlay) 遮罩层（背景遮罩 / 覆盖层） web
The translucent layer that separates a modal surface from the page
把模态界面与页面隔开的那层半透明层
The translucent layer behind this card is the scrim.
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Dim layer压暗层
::backdrop“The dark see-through layer behind the popup” is the scrim's dim layer.
“弹窗背后那层深色半透明层”就是遮罩层的压暗层。
Prompt fragmentPrompt 片段the <dialog>::backdrop dim layer covering the entire viewport behind the modal
覆盖模态框背后整个视口的 <dialog>::backdrop 压暗层
-
2 Backdrop blur背景模糊
backdrop-filter“The page going soft behind the dark overlay” is the backdrop blur.
“页面在深色蒙层后面变柔”就是背景模糊。
Prompt fragmentPrompt 片段a CSS backdrop-filter blur applied to the scrim so the underlying page softens without blurring the modal
加在遮罩层上的 CSS backdrop-filter 模糊，让底下的页面变柔而不模糊模态框本身
-
3 Light-dismiss area轻点关闭区域
HTMLDialogElement.close()“The outside area I click to close the modal” is the light-dismiss area.
“点一下就能关掉模态框的外部区域”就是轻点关闭区域。
Prompt fragmentPrompt 片段the scrim's light-dismiss area calling HTMLDialogElement.close() only when the click lands outside the dialog surface
遮罩层的轻点关闭区域：只在点击落在对话框界面之外时调用 HTMLDialogElement.close()
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Add a scrim behind the modal using the <dialog>::backdrop pseudo-element. It should cover the viewport, dim and optionally blur the page, intercept pointer input, and fade reversibly with the modal.
用 <dialog>::backdrop 伪元素在模态框背后添加遮罩层。它应覆盖整个视口，压暗页面（可选地加模糊），拦截指针输入，并随模态框一起可逆地淡入淡出。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my scrim/backdrop (::backdrop, fixed overlay). Rule out: scrolling chaining through to the page — set overscroll-behavior contain and lock body scroll; the scrim stacking under content because a transformed ancestor created its own stacking context; pointer-events still active while it fades out so it eats clicks invisibly; the dialog ::backdrop unstylable because the dialog was opened with show() not showModal(). The symptom:
调试我的遮罩层（::backdrop、fixed 覆盖层）。逐一排除：滚动穿透到了页面——设置 overscroll-behavior: contain 并锁定 body 滚动；某个带 transform 的祖先建了自己的层叠上下文，把遮罩压到了内容下面；淡出期间 pointer-events 仍然生效，看不见却在吃点击；对话框是用 show() 而不是 showModal() 打开的，导致 ::backdrop 无法设置样式。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | ::backdrop | |
| HTML | <dialog> | |
| CSS | backdrop-filter |