如何给index.html添加水印？-html教程-PHP中文网

css 是实现水印最轻量稳妥的选择，推荐用 body::before 伪元素叠加透明文字层，设 fixed 定位、100%宽高、pointer-events: none，并为打印添加专用 media query 样式。

如何给index.html添加水印？

水印是用 CSS 还是 Canvas 实现？

直接上 CSS 是最轻量、最稳妥的选择。Canvas 虽然灵活，但要处理缩放、滚动、打印、高 DPI 屏幕适配，容易出错，还可能被浏览器拦截或影响可访问性。除非你明确需要动态内容（比如实时插入用户名），否则别碰 Canvas 水印。

核心思路：用 ::before 伪元素在 body 上叠一层带透明文字的背景层，z-index 置顶，pointer-events: none 避免遮挡交互。

常见错误现象：水印文字看不见 → 忘了设 opacity 或 color；水印只在顶部显示一小块 → 忘了设 position: fixed 和宽高 100%；点击按钮失效 → 忘了加 pointer-events: none。

怎么写一个不挡操作、不卡滚动的 CSS 水印？

关键不是“加水印”，而是“加得不干扰”。下面这段可以直接贴进 index.html 的 <style></style> 里：

body::before {
  content: "CONFIDENTIAL";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 60px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.08);
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(0, 0, 0, 0.03) 20px,
    rgba(0, 0, 0, 0.03) 40px
  );
  transform: rotate(-45deg);
  transform-origin: center;
}

参数差异注意点：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

font-size 建议 50–80px：太小看不清，太大在小屏上溢出
rgba(0,0,0,0.08) 控制透明度：0.03–0.12 之间较安全，低于 0.03 基本看不见，高于 0.15 会影响阅读
repeating-linear-gradient 是为了在长页面中填满全屏，纯 background-image 平铺容易在滚动时撕裂
不要用 position: absolute —— 它会随滚动消失；必须用 fixed

水印文字要动态插入怎么办？

如果水印内容来自 JS 变量（比如用户邮箱、时间戳），就不能只靠 CSS content。得用 JS 注入一个 <div> 元素，并复用上面的样式逻辑。 <p>实操建议：</p> <ul> <li>在 <code> 底部加一个空容器：<div id="watermark-layer" style="display:none"></div>

JS 里用 document.getElementById('watermark-layer').textContent = 'USER@EXAMPLE.COM';

再用 CSS 把它样式化成和上面 ::before 一致（只是把 content 换成 text-content）

务必加上 style="pointer-events:none" 到该

<div>，否则会挡住所有点击

<p>性能影响很小，但要注意：如果 JS 在 DOM 加载前执行，<code>getElementById

会返回 null —— 所以要么放底部，要么包在 DOMContentLoaded 里。

打印时水印消失或错位？

默认情况下，fixed 元素在打印预览里常被忽略或截断。要让水印进打印页，必须加专门的媒体查询：

@media print {
  body::before {
    display: block !important;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 40pt;
    color: rgba(0, 0, 0, 0.1);
    z-index: auto;
  }
}

容易被忽略的地方：