水印 Watermark

水印组件，2.56.0 支持

安装

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	`-`