MPdf-全尺寸图片,但仅适用于单页

ber*_*rdh 1 mpdf

我知道也有类似的问题,但是没有一个可以解决我的问题。我要使用mPDF进行以下操作:

Page 1: Text for item 1
Page 2: Full width and height image to cover the page with an image of item 1
Page 3: Text for item 2
Page 4: Full width and height image to cover the page with an image of item 2
...
Run Code Online (Sandbox Code Playgroud)

以下代码以一种我想要实现的方式拉伸图像:

    body {
        background-image:url("image1.jpg");
        background-image-resize: 5;
        background-position: top center;
    }
Run Code Online (Sandbox Code Playgroud)

但这导致将图像设置在每个页面上(我知道,它是body元素)。所以我尝试了以下方法:

<div style='
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:url("image1.jpg");
        background-image-resize: 5;
        background-position: top center;
    '></div>
Run Code Online (Sandbox Code Playgroud)

但这是行不通的。所以我尝试了相同的代码,只是用了颜色,而不是图像:

    <div style='
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #F00;
        '>
    </div>
    <div style="page-break-before: always;"></div>
Run Code Online (Sandbox Code Playgroud)

这正在工作。整个页面是红色的。那么如何实现与图像相同呢?

有任何想法吗?

ber*_*rdh 5

经过大量的试用,我发现,简便的方法是将HTML代码拆分为单独的部分,并通过单独的WriteHtml调用将它们插入。例如:

// Create object
$mpdf = new \mPDF('utf-8');

// Create first text page
$mpdf->WriteHTML('<p>Text for item 1</p>');

// Add a new page with the image
$mpdf->AddPage();
$mpdf->WriteHTML("<html><body style='background-image:url(\"image1.jpg\"); background-image-resize: 5; background-position: top center;'></body></html>");


// Create second page
$mpdf->AddPage();
$mpdf->WriteHTML('<p>Text for item 1</p>');

...
Run Code Online (Sandbox Code Playgroud)