答案是基于CSS和JavaScript实现网页水印。首先使用CSS伪元素设置半透明背景水印，通过background-image、opacity和transform属性实现静态水印；其次利用JavaScript动态创建水印元素，可在页面加载时向容器内注入带样式的文本或图片水印，提升防篡改性。两种方法分别适用于静态内容保护与需动态生成的敏感信息防护场景。

在HTML中实现水印，通常是指在网页内容上叠加一层半透明的文字或图片，以表明版权、状态或防止未经授权的复制。核心思路无外乎几种：利用CSS的背景特性、通过JavaScript动态生成元素，或是更高级的SVG/Canvas技术。选择哪种方法，往往取决于你对水印的动态性、防篡改性以及性能开销的要求。

解决方案

在HTML中实现水印，我个人觉得主要有几种比较靠谱的思路，每种都有其适用场景。最常见且灵活的，我认为是基于CSS和JavaScript的组合。

1. CSS背景图实现 (Background Image with CSS): 这是最简单直接的一种。你可以将水印图片（最好是半透明的PNG）设置为页面或特定容器的背景，并通过CSS控制其重复方式和位置。

    
    
这是一段需要被水印保护的内容。
    @@##@@

/* 更好的做法是创建一个伪元素来承载水印，避免直接影响内容层级 */
.watermarked-container {
    position: relative; /* 确保水印能在其内部定位 */
    width: 100%;
    min-height: 300px; /* 示例高度，根据实际内容调整 */
    overflow: hidden; /* 确保水印不会溢出容器 */
    /* 其他内容样式 */
}
.watermarked-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('path/to/your-watermark.png'); /* 替换为你的水印图片路径 */
    background-repeat: repeat; /* 或 no-repeat, space, round */
    background-position: center center; /* 或 top left 等 */
    opacity: 0.15; /* 调整透明度 */
    z-index: -1; /* 确保在内容下方 */
    pointer-events: none; /* 确保不影响鼠标事件 */
    transform: rotate(-20deg); /* 适当旋转，增加防复制效果 */
    transform-origin: center center;
}

这种方式简单，但水印是静态的，且可能被检查元素移除。它的一个局限是，如果水印图片内容需要动态变化，这种方式就显得力不从心了。

立即学习“前端免费学习笔记（深入）”；

蝉妈妈AI

电商人专属的AI营销助手

下载

2. JavaScript 动态生成水印 (Dynamic Watermark with JavaScript): 这是一种更灵活且难以移除的方法。我们可以用JavaScript在页面加载时动态创建一系列水印元素（可以是文本或小图片），然后将它们绝对定位到页面的各个角落，并设置透明度。

    
    
重要文档标题
    
这份文档包含敏感信息，请勿复制、传播。任何未经授权的使用都将被追究法律责任。
    
日期：2023-10-27
    
作者：某某部门
    @@##@@