使用CSS位置或z-index的图像在图像上无法使用mpdf进行工作

Question

我已经构建了使用mpdf将报告页面转换为PDF的网络应用程序，其中包含两个图像，包括签名和图章，我想将它们都组合在同一行上，一个在前面，另一个在后面。

不幸的是，我尝试过使用CSS的位置和z-index仍然无法使用mpdf，但可以在HTML页面中使用。

这是代码

CSS

    <style>
        .back {
            z-index: 1;
            height: 80px;
            top: 0;
            left: 0;
        }

        .front {
            z-index: 2;
            height: 150px;
            top: 0px;
            left: 50px;
            transform: rotate(0deg);
        }
    </style>

PHP

<img class="back" src="<?= base_url() . 'assets/xyz/sign.png'; ?>" />
<img class="front" src="<?= base_url() . 'assets/xyz/stamp.png'; ?>" />

有人有解决此问题的解决方案吗？

谢谢

Answer 1

mPDF supports absolute positioning，因此您可以将div包裹在两个图像上，然后对其进行绝对定位。

<style>
    #back {
        z-index: 1;
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        left: 0;
    }

    #front {
        z-index: 2;
        width: 80px;
        height: 150px;
        position: absolute;
        top: 0px;
        left: 50px;
    }
</style>

<div id="back"><img src="<?= base_url() . 'assets/xyz/sign.png'; ?>" /></div>
<div id="front"><img src="<?= base_url() . 'assets/xyz/stamp.png'; ?>" /></div>