# 水印 WaterMark

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/water-mark
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

页面上添加特定的文字或图案。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

页面上添加特定的文字或图案。

## 何时使用

适用于防止信息盗用。

## 示例

## WaterMark

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 水印文字内容 | `string \| string[]` | - |
| fontColor | 水印文字颜色 | `string` | `rgba(0, 0, 0, .15)` |
| fontSize | 文字大小 | `string \| number` | `14` |
| fullPage | 是否覆盖整个页面 | `boolean` | `true` |
| gapX | 水印之间的水平间距 | `number` | `24` |
| gapY | 水印之间的垂直间距 | `number` | `48` |
| height | 水印的高度 | `number` | `64` |
| image | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string` | - |
| imageHeight | 图片高度 | `number` | `64` |
| imageWidth | 图片宽度 | `number` | `120` |
| rotate | 水印绘制时，旋转的角度，单位 ° | `number` | `-22` |
| width | 水印的宽度 | `number` | `120` |
| zIndex | 追加的水印元素的 z-index | `number` | `2000` |

### CSS 变量

| 属性      | 说明                 | 默认值 | 全局变量                   |
| --------- | -------------------- | ------ | -------------------------- |
| --z-index | 水印浮层的 `z-index` | `2000` | `--adm-water-mark-z-index` |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt