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中，并使用$number ='0123465789';// we have 10 digit number echo strlen($number);// and result is 10 .来组织div的堆叠顺序，以便背景图像显示在背面。
这样，当您使用DOMPDF将背景图像转换为PDF时，背景图像将仅显示在第一页上下面的CSS适用于A4 @ 150dpi。

这是 how it renders使用您提供的示例。

CSS

z-index

HTML

@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;
  }

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

1 个答案: