遮罩条
盖在图片或卡片底部的说明条：渐变深色底配白字，在任何图片上都能读。zh-maskbar--solid 是纯色条，zh-maskbar--hover 平时隐藏、悬停或聚焦时出现。
纯样式 核心包
示例
代码
<div class="zh-mask-wrap" style="max-width:16rem;aspect-ratio:16/9;background:var(--zh-color-primary-subtle)">
<div class="zh-maskbar">产品发布会现场</div>
</div>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
zh-mask-wrap | 容器（class） | 相对定位并裁切，里面放图片和遮罩条 | |
zh-maskbar | 容器里的元素 | 文字 | 底部渐变遮罩条；颜色固定为深底白字，不随主题变 |
zh-maskbar--solid / --hover | .zh-maskbar | 纯色底 / 悬停才出现 |
样式类
zh-mask-wrap zh-maskbar zh-maskbar--solid zh-maskbar--hover
无障碍
- 悬停才出现的遮罩条，内容在触屏设备上看不到，重要信息不要只放在里面（库在触屏设备上不做特殊处理）
常见问题
遮罩条是什么？
盖在图片或卡片底部的说明条：渐变深色底配白字，在任何图片上都能读。zh-maskbar--solid 是纯色条，zh-maskbar--hover 平时隐藏、悬停或聚焦时出现。
怎么使用遮罩条？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。
遮罩条支持键盘和读屏吗？
悬停才出现的遮罩条，内容在触屏设备上看不到，重要信息不要只放在里面（库在触屏设备上不做特殊处理）。
遮罩条需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。