使用div元素添加网页水印，通过CSS设置position:fixed居中旋转显示，rgba控制透明度，z-index确保层级，pointer-events:none避免干扰交互，并可用JavaScript动态生成内容或替换为图片水印，兼容主流浏览器。
给网页加水印，本质上就是在页面上添加一层视觉标记，防止未经授权的复制或使用。核心思路是利用CSS样式，将水印元素固定在页面上，并调整其透明度和层叠顺序，使其既能起到标记作用，又不影响用户的正常浏览体验。
解决方案
实现HTML网页水印，通常有两种方法：一是使用CSS的::before或::after伪元素，二是直接在HTML中插入一个带有水印文字或图片的div元素。这里推荐使用div元素，因为它更灵活，可以方便地控制水印的位置、大小和样式。
-
HTML结构:
立即学习“前端免费学习笔记（深入）”；
<div id="watermark">你的水印文字</div> <div id="content"> <!-- 网页主要内容 --> <h1>欢迎来到我的网站</h1> <p>这里是网页的主要内容，你可以随意浏览。</p> </div> -
CSS样式:
#watermark { position: fixed; /* 固定位置，不随滚动条滚动 */ top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); /* 居中并旋转45度 */ font-size: 3em; color: rgba(0, 0, 0, 0.1); /* 设置颜色和透明度 */ z-index: 9999; /* 设置层叠顺序，确保在最上层 */ pointer-events: none; /* 防止水印遮挡页面元素 */ user-select: none; /* 禁止用户选中水印文字 */ } #content { position: relative; /* 确保内容可以覆盖水印 */ z-index: 1; /* 确保内容在水印之上 */ }
这段代码的关键在于：
-
position: fixed确保水印固定在屏幕上，不会随页面滚动而消失。 -
transform: translate(-50%, -50%) rotate(-45deg)将水印居中并旋转，通常45度角比较常见。 -
color: rgba(0, 0, 0, 0.1)设置水印颜色为黑色，透明度为0.1，可以根据需要调整。 -
z-index: 9999将水印的层叠顺序设置为最高，确保它在所有元素之上。 -
pointer-events: none防止水印拦截鼠标事件，影响用户操作。 -
user-select: none禁止用户选中水印文字，避免干扰。
水印内容如何动态生成？
如果水印内容需要根据用户信息动态生成，比如显示用户名或时间戳，可以使用JavaScript来实现。
window.onload = function() {
var watermarkText = "用户：" + "exampleUser" + " - " + new Date().toLocaleString();
var watermarkDiv = document.getElementById("watermark");
if (watermarkDiv) {
watermarkDiv.innerText = watermarkText;
}
};这段JavaScript代码会在页面加载完成后，获取id为watermark的元素，并将水印文字设置为动态生成的内容。
如何使用图片作为水印？
除了文字水印，还可以使用图片作为水印。只需要将HTML结构中的文字替换为<img>标签即可。
<div id="watermark">
<img src="watermark.png" alt="水印图片">
</div>CSS样式基本保持不变，但可能需要调整图片的大小和位置，以达到最佳效果。例如，可以添加width和height属性来控制图片大小，或者调整transform属性来改变图片的位置。
水印在不同浏览器上的兼容性如何？
一般来说，上述方法在主流浏览器（Chrome、Firefox、Safari、Edge）上的兼容性都很好。但为了确保最佳兼容性，建议进行充分的测试。特别是对于一些较老的浏览器，可能需要使用一些兼容性技巧，例如添加浏览器前缀。
例如，对于transform属性，可以添加-webkit-和-moz-前缀：
#watermark {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-moz-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}虽然现在已经很少需要这样做，但了解这些兼容性技巧仍然很有用。
