Question

我正在尝试使用带有itext 5的飞碟来创建包含文本的pdf以及占据页面整个上半部分的一些图像，包括边距。使用宽度和高度的css属性，并使图像浮动，我可以让图像显示在页面的顶部，但它仍然（当然）在页面的边缘内。当我试图绕过这个时，比如说

margin-top: -1in;

图像不会移动到当前页面的边距，而是移动到上一页。

如何让图像移动到页边距？

Answer 1

如果您的图片是在HTML页面的body中定义的，我不知道如何将其移入边距。

但是，您可以将图像定义为页面背景。

这就像是：

@page {
    size: A4;
    margin: 20mm; 
    background-image:url('http://xxx/your-image.png');
    background-repeat:no-repeat
}

在这种情况下，徽标位于页边的左上角。

请注意，即使使用no-repeat选项，也会在PDF文档的每个页面上重复显示图像。

如果您只需要在第一页上显示图像，我建议采用另一种方法：为第一页定义一个特定的标题。

例如：

<html>
<head>
<style>
   @page {
       size: A4;
       margin: 25mm; 
   }
   /* Display header only on first page */
   @page :first {
       @top-center {content: element(header);}
   }    
   #header {
       position: running(header);
       height:25mm;
       margin-left:-25mm;
   }
</style>
</head>
<body>
    <div id="header">
       <img src="http://xxx/your-image.png" />
    </div>
</body>
</html>

标题将从边距开始并跨越页面正文。由于它仅为第一页定义，因此不会重复。

如何使用飞碟显示占据页面顶部的图像？

1 个答案: