写了一个给网页添加水印的库

提个建议，支持水印置于顶层放置。因为有些场景下水印需要总是显示，不能被元素的背景颜色覆盖。

感谢，不过其实这种情况下可以把遮挡元素增加一点背景透明度，就不会造成完全覆盖了。
@xiaoxiuaoliang

收了，有用。另外，1 楼说的有道理，水印置于顶层，设置半透明。

@paranoiagu 嗯好的。我想一下如何实现

建议增加一些防护机制，防止水印被简单的关闭、篡改（比如删除 style 属性，修改值等）。

@unizheng 现在有的，通过 MutationObserver 监测 background 属性变化

background style 加个 !important，防止被 css 优先级覆盖。

dispay:none
解决一切

@wly19960911 嗯嗯，有道理


@zxq2233 哈哈，display:none; 都没有内容了，也就不需要水印了

不错哈

@xibidix 感谢

```js
var canvas = document.createElement("canvas");
canvas.width = 600;
canvas.height = 600;
var ctx = canvas.getContext("2d");
ctx.rotate((-25 * Math.PI) / 180);
ctx.fillStyle = "rgba(100,100,100,.4)";
ctx.textAlign = "center";
ctx.fOnt= "40px Airal";
ctx.fillText("https://zee.kim", 600 / 3, 600 / 2);
// ctx.rotate((20 * Math.PI) / 180); //坐标系还原
console.log(canvas.toDataURL("image/png"));
```

之前做在线打印奖状做过类似效果

@jinzhe 嗯，原理差不多。我这个加了画布的大小根据里面内容大小自适应的功能来满足自定义的需求