简介

这段 CSS 可以在导出为图片、PDF 等格式时为内容添加水印，方便在网络上分享时带上版权信息。

效果如下：

image.png

基本用法

CSS 代码如下：

.markdown-body {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="<http://www.w3.org/2000/svg>" width="300" height="200"><rect width="100%" height="100%" fill="transparent"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30" fill="rgba(0, 0, 0, 0.2)" transform="rotate(-30, 150, 100)">你的水印文字</text></svg>');
}

复制以上代码，修改其中的 你的水印文字 即可，然后在导出窗口记得选中这个自定义 CSS：

image.png

更多设置

这段代码的原理是使用一个 SVG 图片作为背景，你可以修改 SVG 图片的属性，从而调整水印的文字颜色、字号、旋转角度等。还可以将 CSS 选择器从 .markdown-body 改为 body 以便让背景从页面边缘开始显示。

一个例子如下：

body {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="<http://www.w3.org/2000/svg>" width="200" height="200"><rect width="100%" height="100%" fill="transparent"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="20" fill="rgba(255, 0, 0, 0.2)" transform="rotate(-15, 150, 100)">你的水印文字</text></svg>');
}

效果如下：

image.png