在线演示

预览区域

这是一个相对定位的容器，水印通过 position: absolute 覆盖它。

尝试在 DevTools 中修改或删除带 data-watermark 的节点，观察自动恢复行为。

开启 blockInteraction 时点击会被水印层拦截；关闭后可选中下层文字。

选项

内容@cnguu/watermark字号 (16px)旋转 (-22°)透明度 (0.12)颜色

偏移 X偏移 Y

间距 X间距 Y

瓦片宽瓦片高

阻挡交互防样式篡改防节点删除

使用方法

import { Watermark } from '@cnguu/watermark'

const wm = Watermark.create({
  content: '© 2024 Acme Inc.',
  container: document.getElementById('app'),
  onlyViewport: false,
})

wm.update({ rotate: -30, fontSize: 18 })
wm.hide()
wm.show()
wm.destroy()

更多选项请查阅 选项文档。