Vue3如何编写长尾词实现网页背景水印功能？

本文共计1390个文字，预计阅读时间需要6分钟。

公司和组织往往需要系统文件或信息的安全保密，因此需要在系统网页上添加带有个人标识（如系统账号或个人信息）的提示，以简单防止截图外传。首先，我们来看看这样一个提示功能。

经常有一些公司和组织出于系统文件或信息安全保密的需要，需要在系统网页上增加带有个人标识（系统账号或个人信息）的水印，可以简单防止截图外传

首先我们来看这样一个水印功能的实现思路，通常是在我们原有的网页上附上一个 DIV 层，将它设置绝对定位铺满整个窗口，然后 z-index 值尽量往大了设，保证让水印层处于当前网页所有元素的上面，又不影响当前网页的操作。

水印上的字体有两种方式添加：

• 第一种直接将字体用块元素包裹，动态设置绝对定位，然后通过 transform 属性旋转；
• 第二种通过在 canvas 上绘制出字体，设置好样式，然后以图片的样式导出，最后用图片作为水印层的背景图。

处于性能方面考虑，第二种方式最优。