Dompdf：如何让背景图像仅显示在第一页

Question

我正在使用 dompdf 生成我想用各种不同公司的品牌纸标记的字母。为此，我通过 css 获取背景图像。请参阅底部的示例图像。然后我设置适当的边距以适应我想写出的内容到空白处。但是我只希望这个信头只显示在第一页上。目前它正在重复到每一页。我的 CSS 看起来像：

<html>
  <head>
    <meta charset="utf-8">
    <title>{$pdf.title}</title>
<style type="text/css">
  @page {
    size: A4;
    margin:0;
    padding: 0;
  }
  body {
    padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm;
    font-size: 7pt;
    font-family: helvetica !important;
    background-image: url('{$base_url}pd-direct.png');
    background-position: center center;
    background-repeat: no-repeat;
    font-size: 10pt;
  }
  #postal-address {
      margin: 0cm;
      margin-left: {$branding.address_offset_left}cm;
      margin-top: {$branding.address_offset_top}cm;
      margin-bottom: {$branding.address_offset_bottom}cm;
      font-size: 10pt;
  }
  #date {
    font-weight: bold;
  }
</style>
  </head>

  <body>

    <div id="page-body">

      <div id="content">

        {if $pdf.postal_address}
        <div id="postal-address">
          {$pdf.postal_address|nl2br}
        </div>
        {/if}

        {$pdf.main_body}

      </div>

    </div>
  </body>
</html>

如何更改此设置，使背景图像仅显示在 dompdf 输出的第一页上？

查看当前正在呈现的 html：http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015

Answer 1

您可以将信笺作为背景图片放在与主要内容div重叠的div中，并使用z-index组织div的堆叠顺序，使背景图片出现在后面。
这样，当您使用 DOMPDF 将其转换为 PDF 时，背景图像只会显示在第一页上。
下面的 CSS 适用于 A4@150dpi。

CSS

@page {
    size: A4;
    margin-top:0.5cm;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    padding: 0;
  }
  body {
    font-family: helvetica !important;
    font-size: 10pt;
    position: relative;
  }
  #overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('http://www.showhousesoftware.com/pd-direct.png');
    background-position: center top;
    background-repeat: no-repeat;
    z-index: -1;
}
  #content{
    padding: 3.5cm 0.50cm 5.00cm 0.50cm;
  }
  #postal-address {
      margin: 0cm;
      margin-left: 1.50cm;
      margin-top: 0.00cm;
      margin-bottom: 1.00cm;
      font-size: 10pt;
  }
  #date {
    font-weight: bold;
  }

HTML

<body>
<div id="page-body">
<div id="overlay">
</div>
<div id="content">
......

</div>
</div>
</body>