最近，我从 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 的每一页？任何帮助将不胜感激!
最佳答案
最后我用一个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:
关于html - 如何在从包含多个分页前/后的 html 文档转换而来的 pdf 的每一页上重复水印图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50366481/