DOMPDF 背景显示不正确的大小

Question

我正在为我 3 岁患有白血病的儿子整理一份小联系表。我想用它，这样人们就可以给他发鼓励信，我们可以把它们打印出来挂在他的房间里。我已经让表单工作并使用 DOMpdf 发布数据。我的问题是，我试图用作“固定”的背景图像拒绝扩大到 100%，而且无论我在图形软件中制作什么尺寸，它都无法正常工作。对我所缺少的任何帮助表示赞赏。代码如下。例如，参见：http://bebrave.me/#contact

<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>

Answer 1

一些注意事项，如果您使用的是 dompdf 0.6.0 beta 3 或来自 github 的最新版本，则适用：

1. dompdf 尚不支持 background-size 属性
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>

Answer 2

图像的分辨率应为每英寸 96 像素 (PPI)。

例如：

A4 格式：分辨率96ppi and 210mm x 297mm or 297mm x 210mm（分别为水平或垂直）