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

Question

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

问题与分页有关...为了使图像成为完整尺寸，我将@page 边距设置为 0，当然，页面直到最底部才分页。如果我将页边距设置为合适的分页距离，那么无论页边距如何，我都无法将图像设为整页大小。

有没有办法绕过这个问题，或者这个想法注定要失败

Answer 1

我真的看不出你的问题，但如果你想要一个覆盖整个 window 的背景图片，你可以将它设置为 body 并将 body 的最小宽度和最小高度设置为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>

Answer 2

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

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

Full size page background image ignore margins

html

css

python

pdf-generation

weasyprint