2013-04-25 105 views
5

我想爲我3歲的兒子患有白血病的一個小聯繫表格。我想用它,這樣人們可以給他發送鼓勵的信息,我們可以將它們打印出來並掛在房間裏。我已經使用DOMpdf工作併發布數據。我的問題是,我試圖用作「固定」的背景圖像,拒絕擴展到100%,無論我在圖形軟件中製作的尺寸是多少,都無法使用。任何幫助表示讚賞我所缺少的。下面的代碼。例如,參見:http://bebrave.me/#contactDOMPDF背景顯示不正確的尺寸

<head> 
<style> 
    body { background-image: url(http://www.bebrave.me/test.jpg); background-position: top left; background-repeat: no-repeat; 
    background-size: 100%; 
    margin-top:300px; 
    width:612px; 
    height:792px; 
    } 
</style> 

</head> 

<body> 

<table width="500px" border="0" align="center" cellpadding="0" cellspacing="0" id="Table"> 
<tr> 
<td align="left">Dear Joshua,<br /> 
<?php echo $post->Message; ?></td> 
</tr> 
<tr> 
<td align="right">Be Brave!<br /> 
-<?php echo $post->Name; ?></td></tr> 
</table> 

</body> 

回答

6

的幾個注意事項,這些應用如果你正在使用DOMPDF 0.6.0 Beta 3中或從GitHub最新:

  1. 背景大小屬性尚未在dompdf中支持
  2. 您正在爲身體添加保證金,因此在應用保證金後會開始正文內容(包括任何背景圖片)
  3. DOMPDF適用的1.2釐米
  4. 在DOMPDF更高版本的默認DPI默認頁邊距爲96。這可能是一個更容易一點,如果你刪除一個回72,這樣它匹配得到的尺寸和放置一個手柄PDF標準。如果您使用任何其他DPI,dompdf將在渲染過程中執行翻譯。

dompdf在背景圖像的應用方面似乎與現代瀏覽器不同。這可能是開發團隊將來希望看到的東西。不過,由於你的目標是dompdf,你必須考慮到它的怪癖。

這裏是一個重寫的文檔,看起來像做你想做的。它的目標是github上的最新代碼,我建議您考慮它包含的許多改進。如果您需要定位不同的版本,請告訴我,我可以調整HTML。

<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'> 
<style> 
    @page { margin: 0in; } 
    body { 
    font-family: Denk One, sans-serif; 
    background-image: url(http://www.bebrave.me/test.jpg); 
    background-position: top left; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    padding: 300px 100px 10px 100px; 
    width:100%; 
    height:100%; 
    } 
    p { 
    width: 400px; 
    margin: auto; 
    } 
    .signature { 
    margin-top: 4em; 
    text-align: right; 
    } 
</style> 

</head> 

<body> 

<p> 
    Dear Joshua,<br /> 
    You may not understand all that's happening. Sometimes, you may not even care. 
    Maybe you just want to do what you have to do to get better so you can 
    go back to being a three-year-old ... growing, learning, playing, loving. 
    It may be hard to understand, but you are a hero to your family and friends. You 
    are a hero to them because you show strength in the face of something so 
    scary. Stay strong, be happy, and and get better. 
</p> 

<p class="signature"> 
    Be Brave!<br /> 
    -BrianS 
</p> 

</body> 
</html> 
+0

如果我也想改變字體,這裏正是我會做這個?我已經安裝了字體到lib,我只是在我的CSS /風格指定確切的字體名稱? – 2013-04-25 17:23:35

+0

是的。最簡單的方法就是將它塗抹在身體上,例如'body {font-family:yourfont,sans-serif; }'。 – BrianS 2013-04-25 17:26:20

+0

修改我的示例以在字體中包含更改。我使用了Google Web字體,因此是額外鏈接的樣式表。 – BrianS 2013-04-25 18:07:52

2

圖像的分辨率應爲每英寸96像素(PPI)。

例如:

幅面A4:分辨率96ppi and 210mm x 297mm or 297mm x 210mm(水平或垂直,分別)