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

category	group	title	description	cover	coverDark	demo	tag
Components	Feedback	Watermark	Add specific text or patterns to the page.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*wr1ISY50SyYAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*duAQQbjHlHQAAAAAAAAAAAAADrJ8AQ/original	cols 1	5.1.0

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 Modal or Drawer

API

Common props ref：Common props

This component is available since antd@5.1.0.

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
inherit	Pass the watermark to the pop-up component such as Modal, Drawer	boolean	true	5.11.0
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	CanvasFillStrokeStyles.fillStyle	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
textAlign	specify the text alignment direction	CanvasTextAlign	center	5.10.0

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>

Why overflow: hidden style is added since version 5.18.0?

User can hide the watermark by setting the container height to 0 through the developer tool in the previous version. To avoid this situation, we added the overflow: hidden style to the container. When the container height changes, the content is also hidden. You can override the style to modify this behavior:

<Watermark style={{ overflow: 'visible' }} />