css属性pointer-events: none

pointer-events：属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。

在前端开发中，实现网页水印似乎是个简单的任务——创建一个半透明的层，铺满整个页面，不就好了吗？但当你真正尝试时，很快就会遇到一个难题：水印挡住了所有交互！按钮点不了，链接打不开，输入框没法聚焦。这就像是给窗户贴了磨砂膜，却把窗户也封死了。

透明水印的关键魔法：为什么 pointer-events: none 如此重要？
看似简单的一行CSS，却解决了前端水印实现中最棘手的问题。

穿透而非阻挡

pointer-events: none 属性的核心思想可以用一句话概括：“看得到，摸不着”。
这个属性让元素对鼠标（或触摸）事件变得"透明"，事件会直接穿过该元素，作用于其下方的元素。

.watermark {
  pointer-events: none; 
}

加上这行代码后，神奇的事情发生了：鼠标点击会直接穿透水印层,页面上的所有交互功能正常