当我打印大 html 文件时，我需要在每个页面上打印一次背景图像。现在它只打印在第一页上。 所以css的部分是：
@media all {
body
{
text-align:left;
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position:right top;
}
}
【问题讨论】：
我找到了一种在 chrome 上打印背景的方法，方法是创建一个 div 和 position: fixed 作为背景。当background-attachment: fixed 不起作用时，我有了这个想法，但这让我想到了position: fixed div
这样，即使在 chrome 上，背景也会完全打印在每一页上。
https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html
HTML：
<body id="print-layout">
<div class="bg-container"></div>
<div class="content">
<h1>Hello there!</h1>
Long content...
</div>
</body>
CSS
body {
width: 100%;
height: 100%;
margin: 0;
}
.bg-container {
position: fixed;
height: 100%;
width: 100%;
z-index: 0;
background-image: url(https://imgur.com/cjmB60j.jpg);
background-size: 100% 100%;
}
.content {
position: relative;
z-index: 1;
padding: 140px 55px;
}
【讨论】：
如果您将 background-attachment 属性指定为固定，它会在每个页面上呈现。这种方法的唯一问题是内容可以剪辑在它上面（而且它似乎只在 FireFox 中工作）。
<style type="text/css" media="print">
body
{
background-image:url('/C:/logo.png');
background-repeat:no-repeat;
background-position: right top;
background-attachment:fixed;
}
</style>
另一个选项是让您的背景图像共享您的可打印区域的比例（即，字母大小 8.5x11 的纸张，四边有 0.5 英寸的边距是 7.5:10）并将徽标放在空白字段中（例如http://i.imgur.com/yvVW2mk.png)。然后您将图像设置为垂直重复并且大小为 100%。
<style type="text/css" media="print">
body
{
background-image:url('/C:/whitespace-logo.png');
background-repeat:repeat-y;
background-position: right top;
background-attachment:fixed;
background-size:100%;
}
</style>
【讨论】：
确保在所有页面上都包含 CSS 文件。
<link type="text/css" rel="stylesheet" href="style.css">
【讨论】：