在HTML页面中添加水印时，设置合适的颜色可以提升页面的整体协调性，避免水印干扰正常内容的展示。常见的水印实现方式有两种，分别是基于Canvas绘制和基于CSS生成，两种方案都支持自定义水印颜色，下面分别介绍具体的实现方法。
一、Canvas绘制水印设置颜色
Canvas绘制水印是通过JavaScript操作Canvas上下文实现的，水印的颜色可以通过上下文的fillStyle属性设置，这个属性支持颜色名、十六进制值、rgb值等多种格式。
1. 基础实现代码
下面的代码会在页面上生成一个全屏的水印，水印文字颜色设置为半透明的灰色，你可以根据需要修改颜色值。
// 创建Canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置Canvas尺寸
canvas.width = 200;
canvas.height = 150;
// 设置水印文字颜色，这里使用rgba格式，最后一个参数是透明度
ctx.fillStyle = 'rgba(200, 200, 200, 0.3)';
// 设置文字样式
ctx.font = '16px Microsoft YaHei';
// 旋转画布，让水印倾斜显示
ctx.rotate(-20 * Math.PI / 180);
// 绘制水印文字
ctx.fillText('内部资料', 30, 80);
// 将Canvas转为图片地址
const watermarkUrl = canvas.toDataURL('image/png');
// 创建水印容器
const watermarkDiv = document.createElement('div');
watermarkDiv.style.position = 'fixed';
watermarkDiv.style.top = '0';
watermarkDiv.style.left = '0';
watermarkDiv.style.width = '100%';
watermarkDiv.style.height = '100%';
watermarkDiv.style.pointerEvents = 'none';
watermarkDiv.style.backgroundImage = `url(${watermarkUrl})`;
watermarkDiv.style.backgroundRepeat = 'repeat';
watermarkDiv.style.zIndex = '9999';
// 将水印添加到页面
document.body.appendChild(watermarkDiv);2. 颜色设置说明
如果你需要修改水印颜色，只需要调整ctx.fillStyle的值即可：
- 设置纯红色：ctx.fillStyle = 'red';
- 设置十六进制颜色：ctx.fillStyle = '#ff0000';
- 设置rgb颜色：ctx.fillStyle = 'rgb(255, 0, 0)';
- 设置带透明度的颜色：ctx.fillStyle = 'rgba(255, 0, 0, 0.2)';
二、CSS生成水印设置颜色
CSS生成水印不需要操作Canvas，通过伪元素和背景属性就能实现，颜色设置更加简单，直接修改对应CSS属性即可。
1. 实现代码
下面的代码通过给body添加伪元素生成水印，水印文字颜色和透明度都可以通过CSS直接调整。
body::before {
content: '内部资料';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
/* 设置水印文字颜色，这里使用rgba格式控制透明度 */
color: rgba(200, 200, 200, 0.3);
font-size: 16px;
font-family: 'Microsoft YaHei';
/* 通过背景重复实现水印铺满页面 */
background-repeat: repeat;
background-size: 200px 150px;
/* 用linear-gradient模拟文字旋转，实现倾斜水印效果 */
background-image: linear-gradient(
-20deg,
transparent 0%,
transparent 40%,
currentColor 40%,
currentColor 60%,
transparent 60%,
transparent 100%
);
background-position: center;
}2. 颜色调整方法
CSS方式的水印颜色只需要修改color属性的值，同样支持多种颜色格式：
- 修改color为蓝色：color: #0000ff;
- 修改透明度：调整rgba的第四个参数，值越小越透明
- 如果需要修改水印背景色，可以添加background-color属性，比如background-color: rgba(255,255,255,0.5);
三、两种方案对比
下面通过表格对比两种水印颜色设置方案的特点，你可以根据需求选择：
| 方案类型 | 颜色设置方式 | 优点 | 缺点 |
|---|---|---|---|
| Canvas绘制 | 通过ctx.fillStyle设置 | 水印效果更灵活，支持复杂绘制 | 需要写JavaScript代码，实现稍复杂 |
| CSS生成 | 通过color属性设置 | 代码简单，无需JS，性能更好 | 复杂水印效果实现难度高 |
实际应用中，你可以根据页面的复杂度和水印需求选择合适的方案，两种方案都支持自由调整水印颜色，适配不同的页面设计风格。