ant-design/components/watermark/index.en-US.md

category	group	title	cover	coverDark	demo
Components	Other	Watermark	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original	cols 1

Add specific text or patterns to the page.

When To Use

• Use when the page needs to be watermarked to identify the copyright.
• Suitable for preventing information theft.

Examples

Basic Multi-line watermark Image watermark Custom configuration

API

Watermark

Property	Description	Type	Default	Version
width	The width of the watermark, the default value of content is its own width	number	120
height	The height of the watermark, the default value of content is its own height	number	64
rotate	When the watermark is drawn, the rotation Angle, unit °	number	-22
zIndex	The z-index of the appended watermark element	number	9
image	Image source, it is recommended to export 2x or 3x image, high priority (support base64 format)	string	-
content	Watermark text content	string | string[]	-
font	Text style	Font	Font
gap	The spacing between watermarks	[number, number]	[100, 100]
offset	The offset of the watermark from the upper left corner of the container. The default is gap/2	[number, number]	[gap[0]/2, gap[1]/2]

Font

Property	Description	Type	Default	Version
color	font color	string	rgba(0,0,0,.15)
fontSize	font size	number	16
fontWeight	font weight	normal | light | weight | number	normal
fontFamily	font family	string	sans-serif
fontStyle	font style	none | normal | italic | oblique	normal

Design Token

FAQ

Handle abnormal image watermarks

When using an image watermark and the image loads abnormally, you can add content at the same time to prevent the watermark from becoming invalid (since 5.2.3).

<Watermark
  height={30}
  width={130}
  content="Ant Design"
  image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
>
  <div style={{ height: 500 }} />
</Watermark>