如何给含分页的HTML转PDF的每页添加背景水印图片

嘿，我来帮你搞定这个每页水印的难题！你遇到的Chrome只有第一页有水印、Firefox完全没显示的问题，主要是因为浏览器打印时对body背景的处理逻辑不同，加上默认可能没开启背景打印选项。下面给你两个靠谱的解决方案：

方案一：给每个分页容器单独设置背景 #

这个方法直接针对你现有的.page元素来设置背景，让每个分页页面都带上水印：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Paginated HTML</title>
  <style type="text/css" media="all">
    body {
      margin: 0; /* 移除默认边距，防止水印错位 */
    }
    div.page {
      page-break-after: always;
      page-break-inside: avoid;
      min-height: 100vh; /* 确保每个页面占满视口高度 */
      background: #fff no-repeat url("watermark.png");
      background-size: 100% 100%; /* 让水印完全覆盖页面 */
      padding: 20px; /* 可选，给内容留边距，避免被水印完全遮挡 */
    }
    /* 最后一页不需要自动分页 */
    div.page:last-child {
      page-break-after: auto;
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>This is Page 1</h1>
  </div>
  <div class="page">
    <h1>This is Page 2</h1>
  </div>
  <div class="page">
    <h1>This is Page 3</h1>
  </div>
</body>
</html>

方案二：使用@page规则结合伪元素（更优雅的方式） #

这个方法利用CSS的@page规则定义页面尺寸，再通过伪元素给每个页面插入水印，灵活性更高：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Paginated HTML</title>
  <style type="text/css" media="all">
    @page {
      size: A4; /* 根据你的需求设置页面尺寸，比如Letter */
      margin: 20mm; /* 设置页面边距 */
    }
    body {
      margin: 0;
    }
    div.page {
      page-break-after: always;
      page-break-inside: avoid;
      min-height: 257mm; /* 减去@page的上下边距（20mm*2），确保内容占满页面 */
      position: relative;
    }
    div.page:last-child {
      page-break-after: auto;
    }
    /* 通过伪元素添加水印 */
    div.page::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("watermark.png") no-repeat center center;
      background-size: 90% 90%; /* 可以调整水印大小，避免太满 */
      opacity: 0.15; /* 调整水印透明度，防止遮挡正文内容 */
      z-index: -1; /* 把水印放在内容下方 */
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>This is Page 1</h1>
  </div>
  <div class="page">
    <h1>This is Page 2</h1>
  </div>
  <div class="page">
    <h1>This is Page 3</h1>
  </div>
</body>
</html>

关键打印设置提醒 #

不管用哪个方案，都要确保浏览器开启了背景打印选项：

• Chrome：打印界面点击「更多设置」，勾选「背景图形」
• Firefox：打印界面点击「页面设置」，勾选「打印背景（颜色和图像）」

原来的方法失效原因：给body设置背景时，Chrome只会在第一页渲染一次body的背景，后续分页不会重复绘制；而Firefox默认不打印背景图像，所以完全看不到水印。

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