全尺寸页面背景图像忽略边距答案

【问题标题】：Full size page background image ignore margins全尺寸页面背景图像忽略边距
【发布时间】：2017-10-28 03:18:09
【问题描述】：

我正在尝试通过 python weasyprint 库 HTML 转换器创建 PDF。我想使用包含页眉/页脚和叠加内容的整页背景图片 (svg)。

问题是关于分页符...为了使图像为全尺寸，我将@page 边距设置为 0，但当然页面直到最底部才会中断。如果我将页边距设置为合适的分页距离，那么无论页边距，我都无法将图像设为整页大小。

有没有办法规避这个问题，还是这个想法注定要失败

【问题讨论】：

我可能遗漏了一些东西并且不熟悉 WeasyPrint，但是在页面主体上应用填充不起作用？
除了边距，您还应该考虑出血（裁剪不会添加任何空间）。我正在为同样的问题而苦苦挣扎，但尚未找到可靠的答案。

标签： python html css pdf-generation weasyprint

【解决方案1】：

我并没有真正看到你的问题，但如果你想要一个覆盖整个窗口的背景图像，你可以将它设置为 body 并将 body 的 min-width 和 min-height 设置为 100vw 和 100vh，如下所示：

body {
  margin: 0;
  min-width: 100vw;
  min-height: 100vh;
  background-image: url("YOUR_IMG_URL");
  background-size: contain; /*or cover or whatever you like*/
}

<html>

  <head>
  </head>
  
  <body>
  </body>
  
</html>

【讨论】：

如果您还有其他问题，请用代码示例解释您的问题
这行不通，因为没有“窗口”可以覆盖。 Weasyprint 没有视口，因此没有 vw 或 vh。它使用（鲜为人知，因为它通常用于打印）W3C Paged Media 模型和@page，而不是视口和连续模型。例如，除了边距之外，还有一个打印出血区域，以及用于页面的 :left 和 :right 选择器。有关更多信息，请参阅w3.org/TR/css-page-3

【解决方案2】：

<style>
image
{
margin: 0px;
width: 100%;
height: 100%;
}
</style>

【讨论】：