在给HTML页面的图片添加水印时，调整水印位置是常见需求，不同的实现方案调整位置的方式存在差异，下面介绍几种常用的调整方法。
一、使用CSS定位调整覆盖层水印位置
这种方式是在图片容器上叠加一个水印层，通过CSS的position属性调整水印的位置，适合简单的文字水印场景。
首先准备基础的HTML结构，图片容器使用相对定位，水印层使用绝对定位，通过top、left、right、bottom属性控制水印位置。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.img-container {
position: relative;
display: inline-block;
}
.watermark {
position: absolute;
color: rgba(255,255,255,0.5);
font-size: 20px;
/* 调整水印位置，这里设置在右下角 */
right: 10px;
bottom: 10px;
pointer-events: none; /* 避免水印影响图片交互 */
}
</style>
</head>
<body>
<div class="img-container">
<img src="https://picsum.photos/600/400?random=2" alt="示例图片">
<div class="watermark">示例水印</div>
</div>
</body>
</html>如果需要调整水印到其他位置，只需要修改watermark类的top、left等属性即可，比如设置top:10px;left:10px;就能把水印放到左上角。
二、使用Canvas绘图调整水印位置
通过Canvas将水印绘制到图片上，水印位置由绘制时的坐标决定，适合需要生成带水印的新图片的场景。
核心逻辑是先加载原图片，然后在Canvas上绘制图片，再通过fillText方法在指定坐标绘制水印文字，修改坐标参数就能调整水印位置。
function addWatermarkToImage(imgUrl, watermarkText, x, y) {
return new Promise((resolve) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'anonymous'; // 解决跨域问题
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
// 绘制原图片
ctx.drawImage(img, 0, 0);
// 设置水印样式
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255,255,255,0.5)';
// 在指定坐标(x,y)绘制水印，修改x和y的值调整位置
ctx.fillText(watermarkText, x, y);
// 导出带水印的图片
resolve(canvas.toDataURL('image/png'));
};
img.src = imgUrl;
});
}
// 使用示例，调整x和y参数改变水印位置，这里设置在(50,50)坐标
addWatermarkToImage('https://picsum.photos/600/400?random=3', '示例水印', 50, 50).then((newImgUrl) => {
const img = document.createElement('img');
img.src = newImgUrl;
document.body.appendChild(img);
});如果需要重复平铺水印，可以嵌套循环修改坐标值，比如每隔100像素绘制一个水印，就能实现全图覆盖的水印效果。
三、使用背景图定位调整水印位置
如果水印是图片形式，也可以将水印作为背景图添加到图片容器上，通过background-position属性调整水印的位置。
.img-with-watermark {
width: 600px;
height: 400px;
background-image: url('原图片地址'), url('水印图片地址');
background-repeat: no-repeat, no-repeat;
/* 调整水印位置，第一个值是水平位置，第二个值是垂直位置，这里设置居中 */
background-position: center, center;
/* 原图片的尺寸和位置 */
background-size: 100% 100%, 100px 50px; /* 水印图片大小设为100*50 */
}这种方式调整位置时只需要修改background-position的第二个值（对应水印的位置），支持使用像素、百分比等单位，比如background-position: center, 80% 90%;就能把水印放到水平80%、垂直90%的位置。
不同场景的选择建议
如果只是临时展示水印，不需要生成新图片，优先选择CSS定位的方式，调整位置最灵活；如果需要生成永久带水印的图片文件，选择Canvas绘图的方式；如果水印是固定图片且不需要频繁调整位置，可以使用背景图定位的方式。
| 实现方式 | 调整位置核心属性 | 适用场景 |
|---|---|---|
| CSS定位覆盖层 | top、left、right、bottom | 临时展示水印，不需要生成新文件 |
| Canvas绘图 | fillText的坐标参数x、y | 需要生成带水印的新图片文件 |
| 背景图定位 | background-position | 水印为图片，位置固定不需要频繁修改 |