空飛ぶ円盤を itext 5 で使用して、テキストと、余白を含むページの上半分全体を占める画像を含む PDF を作成しようとしています。幅と高さの css プロパティを使用し、画像をフロートにすることで、ページの上部に画像を表示できますが、(もちろん) ページのマージン内に収まっています。これを回避しようとすると、
margin-top: -1in;
画像は現在のページの余白ではなく、前のページに移動されます。
画像をページの余白に移動するにはどうすればよいですか?
空飛ぶ円盤を itext 5 で使用して、テキストと、余白を含むページの上半分全体を占める画像を含む PDF を作成しようとしています。幅と高さの css プロパティを使用し、画像をフロートにすることで、ページの上部に画像を表示できますが、(もちろん) ページのマージン内に収まっています。これを回避しようとすると、
margin-top: -1in;
画像は現在のページの余白ではなく、前のページに移動されます。
画像をページの余白に移動するにはどうすればよいですか?
画像が 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>
ヘッダーは余白から始まり、ページの本文にまたがります。最初のページにのみ定義されているため、繰り返されません。