1
피사로 생성 된 PDF에서 배경색을 설정하려고합니다. 나는이 게시물 related question을 보았고 그것들을 구현하려고 시도했지만, 배경은 단지 pdf의 일부분으로 보여진다.피사 html2pdf 배경 이미지가 작동하지 않습니다.
{% load app_filters %}
<html>
\t <head>
\t \t <meta charset="UTF-8">
\t \t <title>Ficha Técnica</title>
\t \t <style type="text/css">
\t \t @page {
\t \t \t \t size: {{ pagesize|default:"A4" }};
\t \t \t \t margin-left: 2.5cm;
\t \t \t \t margin-right: 2.5cm;
\t \t \t \t margin-top: 2cm;
\t \t \t \t margin-bottom: 2cm;
\t \t \t \t background-image: url('{{ STATIC_URL }}pdf/fondo.png');
\t \t \t \t
\t \t \t \t @frame header {
\t \t \t \t \t -pdf-frame-content: page-header;
\t \t \t \t \t margin-top: 0.7cm;
\t \t \t \t \t margin-right: 2mm;
\t \t \t \t \t margin-bottom: 0cm;
\t \t \t \t \t margin-left: 1.2cm;
\t \t \t \t }
\t \t \t \t @frame footer {
\t \t \t \t \t -pdf-frame-content: page-footer;
\t \t \t \t \t bottom: 0cm;
\t \t \t \t \t margin-left: 1cm;
\t \t \t \t \t margin-right: 1cm;
\t \t \t \t \t height: 1cm;
\t \t \t \t }
\t \t \t }
\t \t @font-face {
\t \t \t font-family: "light";
\t \t \t src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-light-webfont.ttf');
\t \t \t font-weight: normal;
\t \t \t font-style: normal;
\t \t }
\t \t @font-face {
\t \t \t font-family: "bold";
\t \t \t src: url('{{ STATIC_URL }}fonts/yanonekaffeesatz-bold-webfont.ttf');
\t \t \t font-weight: normal;
\t \t \t font-style: normal;
\t \t }
\t \t .logo{
\t \t \t margin-bottom: 50px;
\t \t }
\t \t .general img{
\t \t \t width: 400px;
\t \t \t margin-bottom: 50px;
\t \t }
\t \t .titulo{
\t \t \t font-family: "bold";
\t \t \t font-size: 22px;
\t \t \t text-transform: uppercase;
\t \t \t color:#808080;
\t \t \t margin-bottom: 15px;
\t \t \t letter-spacing: "1";
\t \t }
\t \t .general p{
\t \t \t font-family: "light";
\t \t \t font-size: 13px;
\t \t \t color:#808080;
\t \t }
\t \t .line{
\t \t \t width:200pt;
\t \t \t border-top: 2px solid #808080;
\t \t \t color:white;
\t \t \t font-size: 1px;
\t \t }
\t \t .bases
\t \t {
\t \t \t font-family: "bold";
\t \t \t font-size: 12px;
\t \t \t color:#808080;
\t \t }
\t \t .bases table {-pdf-keep-in-frame-mode: shrink;}
\t \t .bases img{
\t \t \t width:85px;
\t \t }
\t \t table{text-align: center;}
\t \t </style>
\t </head>
<body>
\t <div class="content">
\t \t <div class="logo">
\t \t \t <center><img src='{{ STATIC_URL }}pdf/logo_pdf.png'></center>
\t \t </div>
\t \t <div class="general">
\t \t \t <center><img src="{{MEDIA_URL}}{{Proto.image}}" alt=""></center>
\t \t \t <h1 class='titulo'>{{Proto.name|upper}}</h1>
\t \t \t <p>{{Proto.description}}</p>
\t \t </div>
\t \t <div class='line'>.</div>
\t \t <div class="bases">
\t \t \t <h1 class='titulo'>BASES SELECCIONADAS</h1>
\t \t \t <center>
\t \t \t \t <table>
\t \t \t \t \t <tr>
\t \t \t \t \t {%for detalle in ProtoDetalle%}
\t \t \t \t \t <td>
\t \t \t \t \t \t <center><img src="{{MEDIA_URL}}{{detalle.base.especificImage}}" alt=""></center>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <h2>{{detalle.base.name|upper}}</h2>
\t \t \t \t \t \t <h2>{{detalle.tela.name|upper}}</h2>
\t \t \t \t \t \t <table>
\t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t <td style='width:100px;'></td>
\t \t \t \t \t \t \t \t <td><h2>{{detalle.color.name|split_by:"-"}}</h2></td>
\t \t \t \t \t \t \t \t <td style='background-color:{{detalle.color.color}}; color:{{detalle.color.color}}; width:50px; font-size: 5px; border: 1px solid black;'>.</td>
\t \t \t \t \t \t \t \t <td style='width:100px;'></td>
\t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t </table>
\t \t \t \t \t </td>
\t \t \t \t \t {%endfor%}
\t \t \t \t \t </tr>
\t \t \t \t </table>
\t \t \t </center>
\t \t </div>
\t </div>
</body>
</html>배경 이미지는 36 x 36 픽셀로 불과 색 사각형 36 x 36 픽셀입니다 : 이것은 내 코드입니다.
body, html, div에 배경색을 설정하려고했지만 내용이있는 div 만 색상을 사용하려고했습니다. 그래서 나는 왜 배경 이미지 속성이 pdf의 일부분 만 표시되는지 이해하지 못한다.
내 실수는 무엇입니까?
이것은 현재 결과 :
