当前位置：首页 > news >正文

给网站添加文本水印

news 来源：原创 2025/4/29 3:44:55

今天需要在某小程序提交一些证明材料，然后处于隐私保护的需要，在每个材料上都加上了水印。

下面是给在线网站添加水印的办法。

1.打开需要添加水印的页面

2.输入水印生成代码

打开控制台界面，输入以下代码，然后回车

// 水印配置参数
const config = {
    count: 60,            // 水印数量
    angle: 45, // 旋转角度范围
    fontSize: '14px',     // 字体大小
    color: '#cccccc',     // 文字颜色
    opacity: 0.5,         // 透明度
    zIndex: 999           // 层叠顺序
};

// 创建单个水印元素
function createWatermark() {
    const watermark = document.createElement('div');
    watermark.textContent = "仅供招聘申请驿站使用";
    watermark.style.cssText = `
        position: fixed;
        left: ${Math.random() * 100}%;
        top: ${Math.random() * 100}%;
        transform: rotate(${config.angle}deg);
        transform-origin: center center;
        color: ${config.color};
        font-size: ${config.fontSize};
        opacity: ${config.opacity};
        pointer-events: none;
        white-space: nowrap;
        z-index: ${config.zIndex};
    `;
    return watermark;
}

// 批量创建水印
for (let i = 0; i < config.count; i++) {
    document.body.appendChild(createWatermark());
}

// 水印配置参数
const config = {
    count: 20,            // 水印数量
    angle: 45,            // 统一倾斜角度
    fontSize: '14px',     // 字体大小
    color: '#cccccc',     // 文字颜色
    opacity: 0.5,         // 透明度
    zIndex: 999,          // 层叠顺序
    spacing: 200          // 水印间距（像素）
};

// 创建单个水印元素
function createWatermark() {
    const watermark = document.createElement('div');
    watermark.textContent = "仅供招聘申请驿站使用";
    watermark.style.cssText = `
        position: fixed;
        transform: rotate(${config.angle}deg);
        transform-origin: center center;
        color: ${config.color};
        font-size: ${config.fontSize};
        opacity: ${config.opacity};
        pointer-events: none;
        white-space: nowrap;
        z-index: ${config.zIndex};
        user-select: none;
    `;
    
    // 计算有效显示区域（考虑水印尺寸）
    const viewportWidth = window.innerWidth - 200;  // 预留水印宽度
    const viewportHeight = window.innerHeight - 50; // 预留水印高度
    
    // 生成随机位置（确保在可视区域内）
    watermark.style.left = `${Math.random() * viewportWidth}px`;
    watermark.style.top = `${Math.random() * viewportHeight}px`;
    
    return watermark;
}

// 批量创建水印
function createWatermarks() {
    // 清除旧水印
    document.querySelectorAll('[data-watermark]').forEach(el => el.remove());
    
    for (let i = 0; i < config.count; i++) {
        const watermark = createWatermark();
        watermark.dataset.watermark = 'true'; // 标记水印元素
        document.body.appendChild(watermark);
    }
}

// 初始化水印
createWatermarks();

// 窗口变化时重新生成
window.addEventListener('resize', createWatermarks);