2013-04-25 100 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(水平或垂直,分别)