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

发布时间：2020-12-13 17:00:40 所属栏目：PHP教程来源：网络整理

导读：我正在使用dompdf来生成我希望用各种不同公司品牌纸品牌的字母.要做到这一点,我将通过CSS获取背景图像.请参见底部的示例图像.然后我设置适当的边距以适应我想要写入白色空间的内容.但是我只想让这个信头显示在第一页上.目前,它正在重复每页.我的CSS看起来像

我正在使用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

解决方法

您可以将信头作为背景图像放在与主内容div重叠的div中,并使用z-index组织div的堆叠顺序,以便背景图像显示在背面.
这样,当您使用DOMPDF将背景图像转换为PDF时,背景图像将仅显示在第一页上.
下面的CSS适用于A4 @ 150dpi.

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

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!