在 HTML 中添加页面水印效果可以通过以下步骤实现：
首先，在 HTML 文件中添加一个 div 元素，设置其样式为 position: fixed;，将其固定在浏览器窗口的某个位置。
在该 div 元素中添加一个带有水印文本的 span 元素，设置其样式为 opacity: 0.5;，将其透明度设置为 0.5，以实现水印效果。
为了让水印文本不影响其他元素的点击，需要为其设置 pointer-events: none;。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面水印效果</title>
<style>
#watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#watermark span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5em;
font-weight: bold;
color: #000;
opacity: 0.5;
pointer-events: none;
}
</style>
</head>
<body>
<div id="watermark"><span>Watermark Text</span></div>
<h1>这是页面内容</h1>
<p>这是一些文本</p>
</body>
</html>在上面的代码中，我们创建了一个 id 为 watermark 的 div 元素，其中包含一个带有水印文本的 span 元素。我们将该 div 元素设置为 position: fixed;，并将其 z-index 设置为 -1，以使其在其他元素下方。
最后，我们在 span 元素中设置了水印文本的样式，并将其 opacity 设置为 0.5，以实现水印效果。同时，我们将其 pointer-events 设置为 none，以避免其干扰其他元素的点击。
关键词：div元素，span元素，position属性，opacity属性，pointer-events属性