对于内容创作者而言，图片被盗用、被截图搬运是家常便饭。虽然添加物理水印（如PS加水印）能起到一定作用，但对方只需截图裁剪即可去除。真正能起到“威慑+溯源”效果的方法是**前端代码嵌入水印**。这种水印直接渲染在网页DOM层上，用户打开页面即显示，截图时水印会覆盖在图片上方，无法通过简单裁剪去除。

本教程将手把手教你使用纯前端技术，在网页图片上添加覆盖式水印。无论你是博客站长、商城运营者，还是个人作品集展示，这套代码都能直接复制使用。

---

### 前置准备

在开始操作前，请确保你具备以下条件：

1. **基础工具**：一个文本编辑器（如VS Code、Sublime Text，甚至记事本都可以）。

2. **运行环境**：一个现代浏览器（Chrome、Edge、Firefox均可）。

3. **测试文件**：新建一个文件夹，命名为`watermark-demo`。在该文件夹内创建一个HTML文件，命名为`index.html`。

4. **图片素材**：准备一张你希望保护的图片，命名为`demo.jpg`，放入`watermark-demo`文件夹中。如果没有，可以用任意一张网络图片代替，但建议本地测试以保证加载速度。

5. **知识门槛**：不需要精通JavaScript，只需会复制粘贴并修改关键参数即可。

---

### 分步操作步骤

#### 步骤1：搭建基础HTML结构

打开`index.html`，将以下基础代码粘贴进去。这是整个水印功能的骨架。

```html

原创图片保护演示

下方图片已通过前端代码嵌入水印，截图时水印将自动覆盖。

```

**操作细节**：

- 确保``标签的`src`属性值与你图片文件名完全一致（区分大小写）。如果图片不在同一目录，需填写相对路径，如`images/demo.jpg`。

- `id="image-container"`是核心容器，水印层将覆盖在此容器内。

#### 步骤2：编写CSS样式，固定水印层位置

在``标签内的`

```

**操作细节**：

- `pointer-events: none` 是核心设置。没有它，水印层会拦截鼠标点击，导致用户无法点击图片下的链接或按钮。

- `z-index: 10` 确保水印层高于图片。如果页面有其他元素，可适当调高数值。

- 水印颜色`rgba(255,255,255,0.15)`可根据图片背景调整。深色图片建议用白色，浅色图片建议用灰色或黑色。

#### 步骤3：编写JavaScript，动态生成水印网格

这是最核心的步骤。在``标签前，添加`

```

**操作细节**：

- 必须使用`window.addEventListener('load', ...)`而不是`DOMContentLoaded`。因为`load`事件会等待图片完全加载，此时才能获取到图片的`naturalWidth`和`naturalHeight`，确保水印覆盖范围精确。

- `config`对象中的`gapX`和`gapY`控制水印密度。数值越小，水印越密，防护性越好，但可能影响美观。建议`150`和`100`作为平衡点。

- `offsetX`和`offsetY`控制第一个水印出现的位置。适当调整可避免水印正好卡在图片边缘。

#### 步骤4：测试与调试水印效果

保存`index.html`文件，在浏览器中直接打开（双击文件即可）。你应该看到以下效果：

1. 图片上方覆盖了一层半透明的倾斜文字“原创图片 请勿盗用”。

2. 文字呈网格状分布，覆盖整张图片。

3. 鼠标点击图片区域，可以正常穿透水印（例如点击图片下方按钮）。

4. 使用截图工具（如微信截图、QQ截图）截取图片区域，水印会出现在截图结果中。

**如果水印没有出现，请按以下顺序排查**：

- 打开浏览器开发者工具（F12），查看Console（控制台）是否有红色错误提示。

- 检查`index.html`中图片路径`src="demo.jpg"`是否正确，图片是否真的在文件夹内。

- 检查`