# 水印 Watermark

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/watermark
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

水印组件，`2.56.0` 支持

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：基本用法
- **挂载节点**：通过 `getContainer` 设置挂载节点
- **图片水印**：图片水印
- **多行文本**：基本用法
- **属性**：基本用法

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Watermark

`2.56.0` 支持

|参数名|描述|类型|默认值|
|---|---|---|---|
|rotate|单个水印旋转角度|number |`-20`|
|image|水印图片源，优先级比文字内容高|string |`-`|
|className|节点类名|string \| string[] |`-`|
|content|水印的文字内容|string \| string[] |`-`|
|fontStyle|水印文字样式|{color?: string;fontFamily?: string;fontSize?: number \| string;fontWeight?: number \| string;} |`{color:`rgba(0, 0, 0, 0.12)`, fontFamily: `sans-serif`, fontSize: `14px`, fontWeight: `normal` }`|
|gap|水印间的间距|[number, number] |`[100, 100]`|
|height|单个水印的高度|number \| string |`-`|
|offset|水印相对于 `container` 容器的偏移量。|[number, number] |`[`gaps[0] / 2`, `gaps[1] / 2`]`|
|style|节点样式|CSSProperties |`-`|
|width|单个水印的宽度。`image` 时默认为 100，content 时默认为文本宽度|number \| string |`-`|
|zIndex|zIndex|string \| number |`-`|
|getContainer|添加水印的容器 `wrapper`，会把水印 `dom` 作为 `container` 的第一个子节点展示|() => HTMLElement |`-`|

---

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