1
Im пытается установить цвет фона в формате pdf, созданный с помощью pisa. Я видел этот пост related question и пытаюсь их реализовать, но фон отображается только в части PDF. Это мой код:Pisa html2pdf background-image not working
{% 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>фоновое изображение только цветной квадрат 36px на 36px.
Я попытался установить цвет фона для тела, html, div, но только divs с контентом возьмут цвет. поэтому я не понимаю, почему свойство background-image задается только в изображаемом pdf-файле.
Любая идея, в чем моя ошибка?
это текущий результат:
