答案是使用CSS伪元素或JavaScript实现HTML文字水印。CSS方案通过::before或::after生成静态水印，性能高、维护简单；JavaScript方案可动态创建多水印，支持个性化内容和响应式布局，适合需动态控制的场景。
要在HTML页面上添加文字水印，最直接且常用的方式是利用CSS的伪元素（::before 或 ::after）结合 content 属性，或者通过JavaScript动态创建并定位元素。前者轻量高效，后者则提供了更高的灵活性和动态控制能力。选择哪种方式，往往取决于你对水印的需求，比如是静态展示还是需要根据用户行为动态调整。
解决方案
实现HTML页面文字水印，我个人比较推荐的还是CSS伪元素方案，因为它在性能和维护上都有着天然的优势。当然，JavaScript的动态性在某些场景下也无可替代。
1. CSS伪元素方案 (推荐用于静态水印)
这种方法的核心思想是利用CSS的 ::before 或 ::after 伪元素，在目标容器内部生成一个“看不见”的层，然后在这个层上显示水印文字。
立即学习“前端免费学习笔记（深入）”；
HTML文字水印示例
我的重要文档
这是文档的主要内容。这里面包含了许多我认为非常关键的信息，所以我想通过一些视觉手段来提醒阅读者其特殊性。嗯，你知道的，有时候信息安全这块，即使是前端的小细节，也得考虑进去。
比如说，这份内容目前还处于草稿阶段，或者它只供内部传阅，不适合对外公开。一个淡淡的水印就能起到这样的提示作用，它不至于太抢眼，但又能有效地传达信息。
虽然说，前端的水印并不是绝对的安全屏障，毕竟用户总能通过开发者工具找到并移除它。但至少，它能提高一些门槛，或者说，给那些不经意间截图、转发的人一个提醒。这在我看来，就是它的价值所在。
核心CSS属性解释：
-
position: fixed或absolute: 决定水印的定位方式。fixed常用于全屏水印，absolute用于容器内水印。 -
top,left,transform: 用于精确调整水印的位置和旋转角度。transform: translate(-50%, -50%)是实现元素居中的常用技巧。 -
color,opacity: 调整水印的颜色和透明度，使其不至于遮挡主要内容。通常会使用rgba颜色值。 -
font-size,font-weight: 调整水印文字的大小和粗细。 -
pointer-events: none;: 这是个非常关键的属性，它能让水印元素不响应鼠标事件，确保用户可以正常点击、选择水印下方的文本或元素。 -
z-index: 确保水印在内容的上方或下方。通常设置为较低的值（如0）使其在内容之下，或较高值（如9999）使其在最上层但pointer-events: none依然有效。 -
white-space: nowrap;: 防止水印文字过长时自动换行。
2. JavaScript动态生成水印方案 (推荐用于动态或多水印场景)
当需要根据用户ID、时间戳动态生成水印，或者在页面上铺满多个重复水印时，JavaScript就显得更为灵活了。
// 假设这是你的JavaScript文件或
