Dompdf合作论文为背景答案

【问题标题】：Dompf corporative paper as backgroundDompdf合作论文为背景
【发布时间】：2017-06-29 11:44:53
【问题描述】：

我正在使用 Dompdf 创建 pdf 发票，效果很好，但我需要将背景图像填满纸张 (A4)。我有页眉、内容和页脚部分，如果我将背景图片放在正文中，则无法正常工作。

我的html是：

<!doctype html>
        <html>
        <head>
        <meta charset='utf-8'>
        <title>Factura XXXX, S.A. con fecha 2017-06-30</title>

        <style>
        .invoice-header{
            max-width:800px;
            padding:10px;
            font-size:12px;
            line-height:15px;
            font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color:#555;
        }

        .invoice-header table {
            border-collapse: collapse;
        }

        .invoice-header table tr td table tr td {
            border:1px solid black;
        }

        .invoice-header table td{
            padding:2px;
            vertical-align:top;
        }

        .invoice-header table tr.heading td{
            background:#eee;
            font-weight:bold;
        }

        .invoice-footer{
            max-width:800px;
            margin:10px 10px 10px 10px;
            padding:10px;
            font-size:12px;
            line-height:15px;
            font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color:#555;
        }

        .invoice-footer table {
            border-collapse: collapse;
            width: 100%
        }

        .invoice-footer table tr td table tr td {
            border:1px solid black;
        }

        .invoice-footer table td{
            padding:2px;
            vertical-align:top;
        }

        .invoice-footer table tr.heading td{
            background:#eee;
            font-weight:bold;
        }

        .invoice-box{
            max-width:800px;
            height: 509.921259845px;
      max-height: 509.921259845px;
            border:1px solid black;
            margin:10px 6px 10px 6px;
            padding:10px;
            font-size:12px;
            line-height:15px;
            font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color:#555;
        }

        .invoice-box table{
            width:100%;
            text-align:left;
        }

        .invoice-box table td{
            padding:2px;
            vertical-align:top;
        }

        .invoice-box table tr.top table td{
            padding-bottom:10px;
        }

        .invoice-box table tr.top table td.title{
            font-size:45px;
            line-height:45px;
            color:#333;
        }

        .invoice-box table tr.information table td{
            padding-bottom:10px;
            line-height:20px;
        }

        .invoice-box table tr.heading td{
            background:#eee;
            font-weight:bold;
        }

        .invoice-box table tr.details td{
            padding-bottom:10px;
        }

        .invoice-box table tr.item td{
        }

        .invoice-box table tr.item.last td{
            border-bottom:none;
        }

        .invoice-box table tr.total td{
            font-weight:bold;
        }

        @media only screen and (max-width: 600px) {
            .invoice-box table tr.top table td{
                width:100%;
                display:block;
                text-align:center;
            }

            .invoice-box table tr.information table td{
                width:100%;
                display:block;
                text-align:center;
            }
        }

        .page-number:before  {
          content: counter(page);
        }

        .body{
            counter-reset: page 0;
        }

        #header { position: fixed;
                            top: -250px;
                        }
        #footer { position: fixed;
                            bottom: 160px;
                            width: 100%;
                        text-align: center;
                            font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
                            font-size:8px;
        }
        #content {
            position: fixed;
            top: -80px;
        }

        @page {
            margin: 432.283464565px 10px 57.79527559px 10px;
        }
        </style>
        </head>

        <body>
    <div id='header'>
        <div class='invoice-header'>
        <table border=0 cellpadding='0' cellspacing='0' style='width:100%;'>
            <tr>
                <td width='50%'>
                    <table cellpadding='5' style='white-space: nowrap; text-align:center;'>
                    <tr class='heading'>
                        <td style='padding: 5px;'>Numero Factura</td>
                        <td style='padding: 5px;'>Fecha Factura</td>
                    </tr>
                    <tr>
                        <td style='padding: 5px;'>12313/2017</td>
                        <td style='padding: 5px;'>30/06/2017</td>
                    </tr>
                    </table>
                </td>
                <td width='50%'>
                    <table border=1 cellpadding='5' style='width:100%;'>
                        <tr>
                            <td style='line-height: 150%;'>
                            <div align='right'>123</div>
                            XXXXXXX, S.A.<br>
                            ADDRESS <br>
                            28042, MADRID<br>
                            Madrid<br>
                            CIF/NIF: 123123123
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </div>
    </div>
    <!-- Fin Cabecera -->
    <!-- Inicio pie pagina -->
        <div id='footer'>
            <div class='invoice-footer'>
                <table border=0 >
                    <tr>
                        <td style='width:25%'>
                            <table border=1 style='width:100%'>
                                <tr class='heading' style='text-align: center'><td>Forma de Pago<br>
                                    CONFIRMING 60 DIAS F.F.</td></tr>
                                <tr class='heading' style='text-align: center'><td>Vencimiento</td></tr><tr style='text-align: center'><td>29/08/2017 - 148,04 €</td></tr>
                            </table>
                        </td>
                        <td style='width:40%'>
                            <table border=1 style='width:100%'>
                                <tr class='heading' style='text-align: center'>
                                    <td colspan='5' style='height:16px'></td>
                                </tr>
                                <tr class='heading'>
                                    <td>Iban</td>
                                    <td>Entidad</td>
                                    <td>Sucursal</td>
                                    <td>D.C</td>
                                    <td>Nº Cuenta</td>
                                </tr>
                                <tr>
                                    <td style='text-align: center; height:16px'></td>
                                    <td style='text-align: center; height:16px'></td>
                                    <td style='text-align: center; height:16px'></td>
                                    <td style='text-align: center; height:16px'></td>
                                    <td style='text-align: center; height:16px'></td>
                                </tr>
                            </table>
                        </td>
                        <td style='width:35%'>
                        <!-- RESUMEN FACTURA -->
                            <table border=1 style='width:100%'>
                                <tr class='heading' style='text-align: center' nowrap><td colspan='2'>Resumen Factura</td></tr>
                            <tr><td style='text-align: left' nowrap>Base Imponible I.V.A 21% </td><td style='text-align: right' nowrap> 122,35 €</td></tr><tr><td style='text-align: left' nowrap>Importe I.V.A. 21% </td><td style='text-align: right' nowrap>25,69 €</td></tr><tr><td style='text-align: left' nowrap>Total </td><td style='text-align: right' nowrap>148,04 €</td></tr></table>
                        <!-- FIN RESUMEN FACTURA -->
                         </td>
                    </tr>
                </table>

            </div>
        </div>
    <!-- Fin pie pagina -->
    <div id='content'>
        <div class='invoice-box'>
            <table border=0 cellpadding='0' cellspacing='0'>
                <tr class='heading'>
                    <td colspan='2' style='text-align:left; padding-left:200px'>
                        Descripcion de los Servicios
                    </td>
                    <td style='text-align:right; padding-right:25px'>
                        Cantidad
                    </td>
                    <td style='text-align:right; padding-right:25px'>
                        Precio
                    </td>
                    <td style='text-align:right;'>
                        Total
                    </td>
                </tr><tr>
                                                        <td colspan='2' style='text-align:left: padding-left:5px'>POR LOS SERVICIOS PRESTADOS DE LIMPIEZA DURANTE EL MES JUNIO
</td>
                                                        <td style='text-align:right;padding-right:25px'>1,00</td>
                                                        <td style='text-align:right;padding-right:25px'>122,35 €</td>
                                                        <td style='text-align:right'>122,35 €</td>
                                                    </tr>
            </table>
            <!-- FIN Detalle del informe -->
        </div>
    </div>
        </body>
        </html>

我尝试配置带背景的 div 部分，但不起作用：

#fondocorporativo{
            position:fixed
            background-image: url(data:image;base64,".$fila_empresa['foliocorporativo'].");
        }

我也尝试在正文中配置背景图像。但也没有用。

如何配置例如此图像：

https://www.geydes.es/sites/default/files/portfolio-imagenes-proyectos/folio-corporativo-mazlim-geydes.jpg

作为完整发票的背景，使用 css 还是使用 dompdf canvas 功能并不重要。两个都试了，配置不了。

谢谢。

【问题讨论】：

标签： html css dompdf

【解决方案1】：

我终于得到了答案。我创建了一个 div 容器，其中包含一个带有图像的 img 元素，我想让它成为这样的背景：

<div id='foliocorporativo'>
    <img height='100%' width='100%' src='data:image/png;base64,".$fila_empresa['foliocorporativo']."'>
</div>

然后我为 div 容器创建了 css 样式：

#foliocorporativo{
            position: absolute;
            top:-430px
            left:-1000px
            z-index:-1;
        }

在我的例子中，图像的高度为 1100 像素，宽度为 780 像素。

编辑：您必须在标题 div 中写入 div，否则您将只能在第一页获得背景。

【讨论】：