Dompdf：如何獲取背景圖片只顯示在第一頁

我正在使用dompdf來生成字母，我想用各種不同的公司品牌紙品牌。爲此，我通過css獲取背景圖片。在底部看到示例圖像。然後，我設置適當的邊距以適合我要寫入白色空間的內容。不過，我只想讓這個信頭只顯示在第一頁上。目前它正在每頁上重複。我的CSS是這樣的：Dompdf：如何獲取背景圖片只顯示在第一頁

<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

來源

2016-05-25 Adrian Walls

你試過'@頁：first'？據我記得，它適用於wkhtmltopdf - 我不確定它是否適用於dompdf。 – eithed

background-image在使用dompdf的@page上看起來不起作用。 –

在發佈我的答案建議'@page：first'之前沒有看到這些評論！您能否提供一些PHP代碼，以便人們可以更輕鬆地進行剪切/粘貼測試？ – miken32

你可以把信箋爲背景圖像重疊的主要內容股利的股利和使用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>

來源

2016-06-11 15:16:14 SML

裏面，我把大小：A4;'邊距：0.5cm;'這樣背景就會滿了...... – Tanker

Dompdf：如何獲取背景圖片只顯示在第一頁

回答

相關問題