Skip to content

Watermark 水印

在页面上添加文本或图片等水印信息

基本用法

添加水印

多行文本

设置多行文本

图片水印

为了确保图像清晰展示而不是被拉伸,请设置宽度和高度,建议使用至少两倍的宽度和高度的图片来保证显示效果。

自定义配置

配置自定义参数预览水印效果。

API

Attributes

参数说明类型默认值
width水印的宽度, content 的默认值是它自己的宽度number120
height水印的高度, content 的默认值是它自己的高度number64
rotate水印的旋转角度, 单位 °number-22
zIndex水印元素的 z-index 值number9
image水印图片,建议使用 2x 或 3x 图像string-
content水印文本内容string | string[]-
font文字样式FontFont
gap水印之间的间距[number, number][100, 100]
offset水印从容器左上角的偏移 默认值为 gap/2[number, number][gap[0]/2, gap[1]/2]

Font

名称描述类型默认
color字体颜色stringrgba(0,0,0,.15)
fontSize字体大小number16
fontWeight字重'normal' | 'light' | 'weight' | numbernormal
fontFamily字体stringsans-serif
fontStyle字体样式'none' | 'normal' | 'italic' | 'oblique'normal
textAlign文字对齐方式'left' | 'right' | 'center'| 'start' | 'end' center
textBaseline文字基线'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'top