AI开发HTML实战系列第79期 | 如何给HTML添加水印
我们平时在浏览一些网站的时候大家可能会发现网站页面是有水印的，甚至有些水印是位置不固定的，漂浮的，那么怎么做呢？
不是所有水印都是一样的。根据实现方式，大致分三类：
水印固定在页面某个位置（比如右下角），不动。最简单，用CSS的fixed定位就能做。但缺点也很明显——用户一眼就能看到水印在哪，截个图裁掉就没了。
水印铺满整个页面，像重复的瓷砖一样。通常用CSS的repeating-linear-gradient或者Canvas生成背景图来实现。防截图效果好，但视觉上比较”重”，容易干扰内容阅读。
水印散落在页面各处，位置随机，并且缓慢漂浮移动。半透明、不遮挡内容、防截图（因为位置在变，每张截图水印位置都不同）。视觉效果最优雅，实现难度也不高——今天的主角就是它。
这可能是目前为止最短的提示词了，但因为需求足够明确，AI完全知道你要什么：
请在我的代码中添加文字水印，文字内容为AI学习实践基地，整个页面设计8个文字水印，分散在页面中并处于动态漂浮状态，水印要求半透明。
• “文字内容为AI学习实践基地”——明确水印文字，AI不会自己编一个• “8个文字水印”——指定数量。如果不写，AI可能给你铺满整个页面或者只放一个。8个是比较好的平衡——既能起到防截图作用，又不会太密影响阅读• “分散在页面中”——告诉AI不要把8个水印堆在一起，要随机分布在页面各处• “动态漂浮状态”——这是核心需求，区分”固定水印”和”漂浮水印”的关键词。AI会据此添加CSS动画或JS定时器来实现缓慢移动• “半透明”——如果不写，水印可能是不透明的，直接遮挡内容。半透明确保水印”存在但不碍事”
使用方式：把你原来的HTML代码作为附件丢给AI，或者直接复制粘贴进去，然后在对话中发送上面这段提示词。AI会在你原有代码的基础上追加水印功能，不会改动你原来的页面内容和布局。
• 页面原有内容和布局完全不变，水印是”叠加”在上面的• 8个”AI学习实践基地”文字散落在页面不同位置• 水印半透明，不遮挡底层内容的阅读• 水印缓慢漂浮移动，轨迹不规则，看起来像在”游走”• 截两次图对比，水印位置不同——起到防截图作用
上面那段提示词是”标准版”，你可以根据实际需求微调：
“请在我的代码中添加文字水印，文字内容为内部资料，整个页面设计20个文字水印，分散在页面中并处于快速漂浮状态，水印要求半透明且带有旋转效果。”
“请在我的代码中添加文字水印，文字内容为机密文件，整个页面设计12个文字水印，每个水印旋转-30度，分散在页面中并处于缓慢漂浮状态，水印要求半透明且不可被选中、不可被点击。”
“请在我的代码中添加两层水印。第一层：固定在页面右下角的Logo水印。第二层：8个文字水印’请勿外传’，分散在页面中并处于动态漂浮状态，半透明。两层水印都不可被选中。”
漂浮水印这个功能，代码量其实很少——几个定位、几个动画关键帧、一个定时器。但如果你自己从零写，要调透明度、调漂浮速度、调随机位置分布、处理z-index不遮挡内容、处理不可选中……也要花不少时间。用AI的话，一句话搞定。
这种”在已有代码上追加功能”的使用方式，其实非常实用。不只是加水印，你还可以用同样的方式给现有页面加：• “请在我的代码中添加暗色模式切换功能”• “请在我的代码中添加返回顶部按钮”• “请在我的代码中添加加载动画”• “请在我的代码中添加打印优化样式”把原代码丢给AI + 一句需求描述 = 功能追加完成。不需要你理解原有代码的逻辑，不需要手动找插入位置，AI会自己判断。这就是”增量开发”的AI用法。
不过要提醒一点：前端水印无论怎么做，都只能”防君子不防小人”。用户可以通过浏览器开发者工具删掉水印元素、用CSS覆盖水印、或者直接查看页面源代码。所以水印的本质是”提高盗用成本”，而不是”完全杜绝盗用”。对于真正需要版权保护的场景，水印只是其中一环，还需要配合后端溯源、DRM等手段。
但话说回来，对于大部分人的使用场景——教学分享、作品展示、内部资料流转——漂浮水印已经足够了。它让截图”带着你的标记走”，让盗用者多一步”去掉水印”的操作，这本身就是一种有效的威慑。
夜雨聆风
