# 遮罩条

纯样式组件：不需要 JS，写好标记即可。盖在图片或卡片底部的说明条：渐变深色底配白字，在任何图片上都能读。zh-maskbar--solid 是纯色条，zh-maskbar--hover 平时隐藏、悬停或聚焦时出现。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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`、`zh-maskbar`、`zh-maskbar--solid`、`zh-maskbar--hover`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-mask-wrap` | 容器（class） |  | 相对定位并裁切，里面放图片和遮罩条 |
| `zh-maskbar` | 容器里的元素 | 文字 | 底部渐变遮罩条；颜色固定为深底白字，不随主题变 |
| `zh-maskbar--solid / --hover` | .zh-maskbar |  | 纯色底 / 悬停才出现 |

## 无障碍

- 悬停才出现的遮罩条，内容在触屏设备上看不到，重要信息不要只放在里面（库在触屏设备上不做特殊处理）

## 常见问题

### 遮罩条是什么？

盖在图片或卡片底部的说明条：渐变深色底配白字，在任何图片上都能读。zh-maskbar--solid 是纯色条，zh-maskbar--hover 平时隐藏、悬停或聚焦时出现。

### 怎么使用遮罩条？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 遮罩条支持键盘和读屏吗？

悬停才出现的遮罩条，内容在触屏设备上看不到，重要信息不要只放在里面（库在触屏设备上不做特殊处理）。

### 遮罩条需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。