在网页开发中，添加水印是保护内容版权、标识内容归属的常见需求，水印分为文字水印和图片水印两种类型，都可以通过HTML和CSS配合实现，下面分别介绍两种水印的实现方法。
文字水印实现方法
文字水印的核心思路是创建一个全屏覆盖的水印层，通过CSS设置文字样式、旋转角度和透明度，让水印显示在页面内容上方但不影响内容交互。
基础文字水印实现
首先需要在HTML中添加一个用于承载水印的容器元素，然后通过CSS设置水印的样式，具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字水印示例</title>
<style>
/* 页面内容样式 */
.content {
padding: 20px;
line-height: 1.6;
}
/* 水印容器样式 */
.watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 让水印不拦截鼠标事件 */
z-index: 9999;
overflow: hidden;
}
/* 单个水印文字样式 */
.watermark-item {
position: absolute;
font-size: 24px;
color: rgba(0, 0, 0, 0.1); /* 半透明黑色 */
transform: rotate(-45deg); /* 旋转45度 */
white-space: nowrap;
user-select: none; /* 禁止选中水印文字 */
}
</style>
</head>
<body>
<div class="content">
<h1>页面内容标题</h1>
<p>这是页面的正文内容，水印会显示在内容上方，不会影响内容的正常点击和选择。</p>
<p>更多内容可以放在这里，水印会覆盖整个页面可视区域。</p>
</div>
<div class="watermark" id="watermark"></div>
<script>
// 生成文字水印的函数
function createTextWatermark(text) {
const watermarkContainer = document.getElementById('watermark');
const containerWidth = window.innerWidth;
const containerHeight = window.innerHeight;
const itemWidth = 200; // 单个水印的宽度
const itemHeight = 100; // 单个水印的高度
// 计算需要生成的水印数量
const cols = Math.ceil(containerWidth / itemWidth) + 1;
const rows = Math.ceil(containerHeight / itemHeight) + 1;
// 循环生成水印元素
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const watermarkItem = document.createElement('div');
watermarkItem.className = 'watermark-item';
watermarkItem.textContent = text;
// 设置水印位置
watermarkItem.style.left = j * itemWidth + 'px';
watermarkItem.style.top = i * itemHeight + 'px';
watermarkContainer.appendChild(watermarkItem);
}
}
}
// 调用函数生成水印，传入水印文字
createTextWatermark('内部资料 禁止外传');
// 窗口大小变化时重新生成水印
window.addEventListener('resize', function() {
document.getElementById('watermark').innerHTML = '';
createTextWatermark('内部资料 禁止外传');
});
</script>
</body>
</html>
文字水印参数调整说明
可以通过修改CSS和JS中的参数调整水印效果：
- 修改
.watermark-item的font-size可以调整水印文字大小 - 修改
color的透明度值可以调整水印的清晰程度，值越小越透明 - 修改
transform的旋转角度可以改变水印的倾斜方向 - 修改JS中的
itemWidth和itemHeight可以调整水印的排列密度
图片水印实现方法
图片水印的实现思路和文字水印类似，只是把水印内容从文字换成图片，同样需要创建全屏覆盖的水印层，通过CSS控制图片的样式和排列。
基础图片水印实现
首先需要准备一张透明背景的水印图片，然后通过JS动态生成多个图片水印元素，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片水印示例</title>
<style>
.content {
padding: 20px;
line-height: 1.6;
}
.img-watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.img-watermark-item {
position: absolute;
width: 120px; /* 水印图片宽度 */
height: 120px; /* 水印图片高度 */
opacity: 0.2; /* 图片透明度 */
user-select: none;
}
</style>
</head>
<body>
<div class="content">
<h1>页面内容标题</h1>
<p>这是带有图片水印的页面内容，水印图片会重复铺满整个页面。</p>
<p>图片水印相比文字水印，辨识度更高，适合品牌标识类的场景。</p>
</div>
<div class="img-watermark" id="imgWatermark"></div>
<script>
// 生成图片水印的函数，参数为水印图片的路径
function createImageWatermark(imgSrc) {
const watermarkContainer = document.getElementById('imgWatermark');
const containerWidth = window.innerWidth;
const containerHeight = window.innerHeight;
const itemWidth = 150; // 单个水印图片的占位宽度
const itemHeight = 150; // 单个水印图片的占位高度
const cols = Math.ceil(containerWidth / itemWidth) + 1;
const rows = Math.ceil(containerHeight / itemHeight) + 1;
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const img = document.createElement('img');
img.className = 'img-watermark-item';
img.src = imgSrc;
img.style.left = j * itemWidth + 'px';
img.style.top = i * itemHeight + 'px';
// 随机旋转角度，让水印更自然
const rotateAngle = Math.random() * 60 - 30; // -30到30度随机
img.style.transform = `rotate(${rotateAngle}deg)`;
watermarkContainer.appendChild(img);
}
}
}
// 调用函数生成图片水印，这里使用示例图片路径，实际使用时替换为自己的图片路径
createImageWatermark('https://ipipp.com/watermark.png');
// 窗口大小变化时重新生成水印
window.addEventListener('resize', function() {
document.getElementById('imgWatermark').innerHTML = '';
createImageWatermark('https://ipipp.com/watermark.png');
});
</script>
</body>
</html>
图片水印注意事项
- 水印图片建议使用透明背景的PNG格式，避免遮挡页面内容
- 可以通过修改
.img-watermark-item的opacity属性调整水印的透明度 - 如果水印图片加载失败，可以添加备用文字水印作为 fallback
水印防护优化
基础的水印可能会被用户通过开发者工具删除，为了提升水印的防护性，可以添加以下优化：
监听DOM变化自动恢复水印
通过MutationObserver监听水印容器的DOM变化，当水印被删除时自动重新生成，代码如下：
// 监听水印容器变化，防止水印被删除
function observeWatermark() {
const watermarkContainer = document.getElementById('watermark');
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// 如果水印容器被修改，重新生成水印
if (mutation.removedNodes.length > 0 || mutation.type === 'childList') {
// 先清空容器再重新生成
watermarkContainer.innerHTML = '';
createTextWatermark('内部资料 禁止外传');
}
});
});
// 监听子节点变化和属性变化
observer.observe(watermarkContainer, { childList: true, subtree: true });
}
// 初始化水印后调用监听函数
createTextWatermark('内部资料 禁止外传');
observeWatermark();
禁止右键和开发者工具（可选）
可以结合JS禁止页面右键和F12打开开发者工具，不过这种方式只能提升普通用户的删除门槛，无法完全阻止专业人员操作，代码如下：
// 禁止右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
// 禁止F12打开开发者工具
document.addEventListener('keydown', function(e) {
if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'i' || e.key === 'C' || e.key === 'c'))) {
e.preventDefault();
return false;
}
});
两种水印的适用场景
| 水印类型 | 适用场景 | 优缺点 |
|---|---|---|
| 文字水印 | 内部文档、临时预览页面、需要自定义文字内容的场景 | 优点：实现简单，无需额外图片资源，文字内容可动态修改；缺点：美观度较低，辨识度一般 |
| 图片水印 | 品牌官网、付费内容页面、需要展示品牌标识的场景 | 优点：美观度高，辨识度强，可展示logo等复杂内容；缺点：需要准备图片资源，加载依赖网络 |
以上就是HTML制作文字和图片水印的完整方法，开发者可以根据实际需求选择合适的方案，同时结合防护优化提升水印的可靠性。