1

pisa で生成された pdf に背景色を設定しようとしています。この投稿に関連する質問を見て、それらを実装しようとしましたが、背景は pdf の一部にしか表示されません。これは私のコードです:

{% load app_filters %}
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ficha Técnica</title>
		<style type="text/css">
		 @page {
				size: {{ pagesize|default:"A4" }};
				margin-left: 2.5cm;
				margin-right: 2.5cm;
				margin-top: 2cm;
				margin-bottom: 2cm;
				background-image: url('{{ STATIC_URL }}pdf/fondo.png');
				

				@frame header {
					-pdf-frame-content: page-header;
					margin-top: 0.7cm;
					margin-right: 2mm;
					margin-bottom: 0cm;
					margin-left: 1.2cm;
				}

				@frame footer {
					-pdf-frame-content: page-footer;
					bottom: 0cm;
					margin-left: 1cm;
					margin-right: 1cm;
					height: 1cm;
				}


			}

		@font-face {
			font-family: "light";
			src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-light-webfont.ttf');
			font-weight: normal;
			font-style: normal;
		}
		@font-face {
			font-family: "bold";
			src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-bold-webfont.ttf');
			font-weight: normal;
			font-style: normal;
		}
		.logo{
			margin-bottom: 50px;
		}
		.general img{
			width: 400px;
			margin-bottom: 50px;
		}
		.titulo{
			font-family: "bold";
			font-size: 22px;
			text-transform: uppercase;
			color:#808080;
			margin-bottom: 15px;
			letter-spacing: "1";
		}
		.general p{
			font-family: "light";
			font-size: 13px;
			color:#808080;

		}
		.line{
			width:200pt; 
			border-top: 2px solid #808080;
			color:white;
			font-size: 1px;
		}
		.bases
		{
			font-family: "bold";
			font-size: 12px;
			color:#808080;
		}
		.bases table {-pdf-keep-in-frame-mode: shrink;}
		.bases img{
			width:85px;
		}
		table{text-align: center;}
		</style>
	</head>
<body>
	<div class="content">
		<div class="logo">
			<center><img src='{{ STATIC_URL }}pdf/logo_pdf.png'></center>
		</div>
		<div class="general">
			<center><img src="{{MEDIA_URL}}{{Proto.image}}" alt=""></center>
			<h1 class='titulo'>{{Proto.name|upper}}</h1>
			<p>{{Proto.description}}</p>
		</div>
		<div class='line'>.</div>
		<div class="bases">
			<h1 class='titulo'>BASES SELECCIONADAS</h1>
			<center>
				<table>
					<tr>
					{%for detalle in ProtoDetalle%}
					<td>
						<center><img src="{{MEDIA_URL}}{{detalle.base.especificImage}}" alt=""></center>
						<br>
						<h2>{{detalle.base.name|upper}}</h2>
						<h2>{{detalle.tela.name|upper}}</h2>
						<table>
							<tr>
								<td style='width:100px;'></td>
								<td><h2>{{detalle.color.name|split_by:"-"}}</h2></td>
								<td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td>
								<td style='width:100px;'></td>
							</tr>
						</table>
					</td>
					{%endfor%}
					</tr>
				</table>
			</center>
		</div>
	</div>
</body>
</html>

背景画像は、36px x 36px の色付きの正方形です。

background-color を body,html,div に設定しようとしましたが、コンテンツを含む div のみが色を取得します。だから、背景画像のプロパティが表示されたpdfの一部にしか設定されない理由がわかりません。

私の間違いは何ですか？

これは現在の結果です:

ここに画像の説明を入力

4

2 に答える 2

0

私が提案するpdfの背景で動作しているようです。（軽量の）ドキュメントにはpdfの背景のみが記載されていることに注意してください。 https://xhtml2pdf-base.googlecode.com/hg/doc/xhtml2pdf-en.html

于 2015-12-16T21:56:29.900 に答える