HTML无法直接添加水印，需通过CSS伪元素定位、Canvas绘图或服务端预处理实现；前端方案仅具示意性防护，版权敏感场景必须服务端嵌入水印。
HTML本身不支持直接添加水印
浏览器渲染HTML时，<img>标签只是加载并显示图像，没有任何内置机制去“叠加文字”或“绘制半透明层”。所谓“HTML加水印”，实际是绕过HTML纯标签能力，用CSS定位+伪元素、Canvas绘图或服务端预处理来实现。很多人卡在这一步，以为写个watermark="true"就能生效——不存在这个属性。
CSS伪元素 + absolute定位是最轻量的前端方案
适用于静态展示页，水印只需覆盖在图片上、不需防截图。核心思路是把<img>包进一个<div>容器，再用::after生成带文字/图案的遮罩层。
常见错误现象：
• 水印被图片裁剪（没设overflow: visible）
• 水印位置偏移（父容器没设position: relative）
• 水印文字模糊（用了font-size: 12px却没配transform: rotate(-30deg)和opacity: 0.15）
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则absolute水印会相对于body定位 - 水印文字推荐用
transform: rotate(-30deg)+font-size: 48px+opacity: 0.08，太淡看不见，太浓影响阅读 - 避免用
background-image做水印图——它无法响应式缩放，且不能和图片同步加载完成 - 别忘了给水印层加
pointer-events: none，否则会拦截图片上的点击事件
Canvas动态绘图适合需要防简单右键下载的场景
把原图draw到<canvas>上，再用fillText()或drawImage()叠加水印。用户右键保存时，只能拿到带水印的合成图（但F12里仍能扒到原始URL）。
容易踩的坑：
-
crossOrigin没配导致canvas.toDataURL()报错SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement' - 异步加载图片后没等
img.onload就调用ctx.drawImage()，画布空白 - 水印文字没用
ctx.font指定字体大小和类型，不同浏览器渲染差异大 - 高DPI屏幕（如MacBook）下没做
devicePixelRatio缩放，水印模糊或过小
关键代码片段：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous'; // 必须！否则跨域图无法读取像素
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
ctx.font = '48px Arial';
ctx.fillText('© YourSite', 50, 50);
};
真正防搬运？得靠服务端预处理或CDN水印
前端所有方案都挡不住懂开发者工具的人。如果版权敏感（比如付费图库、设计稿预览），水印必须在图片返回前就嵌入。常见做法：
- Nginx用
ngx_http_image_filter_module加文字/图片水印（需编译支持） - 云服务商如Cloudinary、阿里云OSS、腾讯云CI，提供URL参数实时加水印，例如
?watermark=1&text=©2024 - Node.js用
sharp或canvas模块，在API响应前合成水印图
注意：这类方案会增加首屏加载延迟，且水印不可动态切换。如果页面要支持“开启/关闭水印”开关，前端方案仍是唯一选择——但得接受它本质是“示意性防护”。
最常被忽略的一点：水印内容本身要有法律效力。单纯写“©”不够，最好包含可追溯的授权ID、时间戳或用户标识，否则纠纷时难作证据。
