HTML加水印怎么不影响内容_HTML加水印不影响内容的实现方法

<div class="page-content-wrapper">
    <!-- 你的页面主要内容都在这里 -->
    <h1>重要文档标题</h1>
    <p>这是一段非常重要的内容，用户可以正常地进行选择、复制和交互。</p>
    <button onclick="alert('你点击了按钮！')">点击我</button>
    <a href="#">这是一个链接</a>

    <!-- 水印叠加层，它会浮在内容之上 -->
    <div class="watermark-overlay">
        机密文件 禁止外传
    </div>
    <!-- 如果需要多个平铺水印，可以创建多个div或通过JS动态生成 -->
    <!-- <div class="watermark-overlay-tiled">保密</div> -->
</div>

.page-content-wrapper {
    position: relative; /* 确保水印相对于此容器定位 */
    min-height: 100vh; /* 示例：让容器至少占满视口高度 */
    overflow: hidden; /* 防止水印旋转后溢出容器 */
    padding: 20px; /* 给内容留出一些空间 */
}

.watermark-overlay {
    position: absolute; /* 让水印脱离文档流，自由定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%) rotate(-30deg); /* 居中后旋转，增加视觉效果 */
    color: rgba(0, 0, 0, 0.1); /* 半透明的文字颜色 */
    font-size: 4em; /* 大字体 */
    font-weight: bold;
    white-space: nowrap; /* 防止文字换行 */
    z-index: 9999; /* 确保水印在大部分内容之上 */
    pointer-events: none; /* 核心！让鼠标事件（点击、选择等）穿透水印层，直接作用于其下方的元素 */
    user-select: none; /* 禁用水印文字的选择 */
    -webkit-user-select: none; /* 兼容Safari */
    -moz-user-select: none; /* 兼容Firefox */
    -ms-user-select: none; /* 兼容IE/Edge */
}

/* 如果是平铺水印，可以这样设置，但通常会结合JS动态生成 */
/* .watermark-overlay-tiled {
    position: fixed; // 或 absolute, 取决于水印是否随滚动
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.05) 0px,
        rgba(0, 0, 0, 0.05) 100px,
        transparent 100px,
        transparent 200px
    );
    background-size: 200px 200px;
    pointer-events: none;
    z-index: 9999;
    top: 0;
    left: 0;
} */

function addDynamicWatermark(text, containerId = 'body') {
    const container = containerId === 'body' ? document.body : document.getElementById(containerId);
    if (!container) {
        console.error('Watermark container not found:', containerId);
        return;
    }

    // 创建水印元素
    const watermarkDiv = document.createElement('div');
    watermarkDiv.className = 'dynamic-watermark-item'; // 使用一个新类名，方便管理
    watermarkDiv.textContent = text;

    // 应用样式
    // 这里的样式与之前.watermark-overlay类似，但可能需要调整以适应动态生成
    watermarkDiv.style.cssText = `
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        color: rgba(0, 0, 0, 0.15); /* 稍微深一点，或者保持一致 */
        font-size: 2.5em;
        font-weight: bold;
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        /* 确保水印始终在容器内，且不影响容器滚动 */
        width: max-content; /* 让宽度自适应内容 */
        height: max-content; /* 让高度自适应内容 */
    `;

    container.appendChild(watermarkDiv);
}

// 示例用法：
// 获取当前用户信息和时间
const userName = '用户A123';
const currentTime = new Date().toLocaleString();
addDynamicWatermark(`${userName} - ${currentTime}`);

// 如果需要满屏平铺的动态水印，逻辑会稍微复杂一些：
function addTiledDynamicWatermarks(text, containerId = 'body') {
    const container = containerId === 'body' ? document.body : document.getElementById(containerId);
    if (!container) {
        console.error('Watermark container not found:', containerId);
        return;
    }

    // 清除旧的水印，避免重复添加
    container.querySelectorAll('.dynamic-watermark-item-tiled').forEach(el => el.remove());

    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    const watermarkSize = 200; // 每个水印的近似尺寸（宽度和高度）
    const rotation = -30; // 旋转角度

    // 粗略计算需要多少个水印来覆盖整个区域
    const cols = Math.ceil(containerWidth / watermarkSize) + 2; // 多加一些防止边缘空白
    const rows = Math.ceil(containerHeight / watermarkSize) + 2;

    for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
            const watermarkDiv = document.createElement('div');
            watermarkDiv.className = 'dynamic-watermark-item-tiled';
            watermarkDiv.textContent = text;
            watermarkDiv.style.cssText = `
                position: absolute;