如何在从包含多个 page-break-before/after 的 html 文档转换而来的 pdf 的每一页上重复水印图片？

Question

最近，我从 html/CSS 生成了一个很大的 pdf，其中包含几十页。在每个页面上都需要一个 wartermark 图片作为背景，如下所示：

我的代码如下：

html

<!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 {
      background: #fff repeat url("watermark.png");
      background-size: 100%;
    }
    
    div.page {
      page-break-after: always;
      page-break-inside: avoid;
    }
  </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(66.0.3359.139) 将 html 打印为 pdf 时，我得到的 pdf 只有第一页，包括背景中的水印图片：

当我使用 FireFox(60) 将 html 打印成 pdf 时，我得到一个没有包含水印图片的页面的 pdf：

有谁知道如何将水印图片作为背景扩展到从html/css生成的pdf的每一页？任何帮助将不胜感激！

Answer 1

最后我用一个div把body的内容全部包起来，并在这个div上画了背景水印图。它似乎有点缺陷，水印图片没有延伸到最后一页的底部（结果 pdf 图片中的红色圆圈）。任何消除此缺陷的帮助将不胜感激！附加代码如下：

-CSS :

.watermark
  {
    background: #fff url("watermark.png");
        background-size: 100%;
  }

-HTML:

<div class="watermark">
  <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>
</div>

结果pdf：

如何在从包含多个 page-break-before/after 的 html 文档转换而来的 pdf 的每一页上重复水印图片？

how to repeat watermark pic on every page of a pdf which is transformed from a html doc that includes several page-break-before/after?

html

css

pdf

background

page-break