使用HTML+CSS实现水印覆盖层：解决水印遮挡元素交互问题

你的问题根源在于这个占满整个视口的fixed定位水印元素——它会拦截所有落在自身区域内的鼠标事件，导致下方元素无法被点击或交互。

只需要给.watermark-text添加pointer-events: none属性，就能让这个元素“穿透”鼠标事件，让下方元素正常响应交互：

.watermark-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  pointer-events: none; /* 新增这行 */
}

<p class="watermark-text">A Web Dev Course Project</p>

如果需要水印文本本身可被选中或交互，可以把文本放在子元素里，父容器设置pointer-events: none，子元素设置pointer-events: auto，这样既不影响下方元素，又能操作水印内容：

.watermark-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  pointer-events: none;
}

.watermark-text {
  pointer-events: auto; /* 让文本可交互 */
}

<div class="watermark-container">
  <p class="watermark-text">A Web Dev Course Project</p>
</div>

内容的提问来源于stack exchange，提问作者Akash Patel