ant-design/components/watermark/index.zh-CN.md
MadCcc 40e77c40d3
docs: overview dark cover (#40666)
* docs: add dark overview

* docs: show dark cover in dark theme

* docs: update cover
2023-02-09 22:17:31 +08:00

1.9 KiB

category subtitle group title cover coverDark demo
Components 水印 其他 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

给页面的某个区域加上水印。

何时使用

  • 页面需要添加水印标识版权时使用。
  • 适用于防止信息盗用。

代码演示

基本 多行水印 图片水印 自定义配置

API

Watermark

参数 说明 类型 默认值 版本
width 水印的宽度,content 的默认值为自身的宽度 number 120
height 水印的高度,content 的默认值为自身的高度 number 64
rotate 水印绘制时,旋转的角度,单位 ° number -22
zIndex 追加的水印元素的 z-index number 9
image 图片源,建议导出 2 倍或 3 倍图,优先级高 string -
content 水印文字内容 string | string[] -
font 文字样式 Font Font
gap 水印之间的间距 [number, number] [100, 100]
offset 水印距离容器左上角的偏移量,默认为 gap/2 [number, number] [gap[0]/2, gap[1]/2]

Font

参数 说明 类型 默认值 版本
color 字体颜色 string rgba(0,0,0,.15)
fontSize 字体大小 number 16
fontWeight 字体粗细 normal | light | weight | number normal
fontFamily 字体类型 string sans-serif
fontStyle 字体样式 none | normal | italic | oblique normal