这叫啥 UI？
← 返回组件目录

COMPONENT 59 · Overlays & Disclosure

遮罩层

Scrim

也叫BackdropDimming LayerOverlay背景遮罩

覆盖在主内容上方的半透明层，用于弱化背景并承托临时界面。

A translucent layer that dims content behind a temporary surface.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 半透明覆盖层
  • 背景内容
  • 前景界面

适合使用

  • 对话框、抽屉或灯箱需要明确隔离背景时。

不建议使用

  • 只想装饰性调暗区域，或前景界面并非模态时。

键盘与无障碍

  • 遮罩本身设为装饰；由前景容器承担 dialog 语义，并正确管理焦点和关闭行为。

DESCRIBE IT TO AI

这样告诉编程助手

实现遮罩层（Scrim）：覆盖在主内容上方的半透明层，用于弱化背景并承托临时界面。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<section class="demo scrim-demo">
  <button id="show-scrim" type="button">打开临时面板</button>
  <dialog class="scrim-dialog" aria-labelledby="scrim-title">
    <h2 id="scrim-title">筛选条件</h2>
    <p>遮罩弱化后方内容，并阻止误操作。</p>
    <button id="hide-scrim" type="button">关闭</button>
  </dialog>
</section>