11

当我打印大 html 文件时，我需要在每个页面上打印一次背景图像。现在它只打印在第一页上。所以css的部分是：

@media all {
    body
    {
        text-align:left;
        background-image:url('/C:/logo.png');
        background-repeat:no-repeat;
        background-position:right top;
    }
}
4

3 回答 3

10

如果您将 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>
于 2013-11-07T14:48:04.627 回答
1

我找到了一种方法，即使在 chrome 上也可以通过创建一个用作背景的divwith来打印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;
}
于 2021-11-23T10:16:08.403 回答
-4

确保在所有页面上都包含 CSS 文件。

<link type="text/css" rel="stylesheet" href="style.css">
于 2013-11-07T14:07:49.373 回答