---
title: Overlay 遮罩层
description: 通过遮罩层，可以强调部分内容
spline: message
全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。
"usingComponents": {
"t-overlay": "tdesign-miniprogram/overlay/overlay"
}
{{ base }}
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|---|---|---|---|---|
| visible | Boolean | false | 是否展示 | N |
| zIndex | Number | 11000 | 遮罩层及 | N |
| duration | Number | 300 | 背景色过渡时间，单位毫秒 | N |
backgroundColor | String | - | 遮罩层的背景色 | N
preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
| 名称 | 参数 | 描述 |
|---|---|---|
| click | ({ visible: boolean }) |
点击遮罩时触发 |
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-overlay-bg-color | @font-gray-2 | -
--td-overlay-transition-duration | 300ms | -