# Watermark

- Page: https://jiguang132.com/resources/arco-design/docs/watermark
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Watermark component. `2.56.0` supported

## Install

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

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage.
- **container**: set target node by `getContainer` property
- **Image**: Image watermark
- **multiple line content**: Basic usage.
- **Property**: Basic uasge.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Watermark

2.56.0

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|rotate|Single watermark rotation angle|number |`-20`|
|image|Watermark image source has higher priority than text content|string |`-`|
|className|Additional css class|string \| string[] |`-`|
|content|The text content of the watermark|string \| string[] |`-`|
|fontStyle|Watermark text style|{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|spacing between watermarks|[number, number] |`[100, 100]`|
|height|The height of a single watermark|number \| string |`-`|
|offset|The offset of the watermark relative to the `container` container.|[number, number] |`[`gaps[0] / 2`, `gaps[1] / 2`]`|
|style|Additional style|CSSProperties |`-`|
|width|The width of a single watermark. The default is 100 for `image` and the text width for content.|number \| string |`-`|
|zIndex|zIndex|string \| number |`-`|
|getContainer|The container `wrapper` that adds a watermark will display the watermark `dom` as the first child node of the `container`.|() => HTMLElement |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt