使用CSS位置或z索引的图像覆盖图像使用mpdf不起作用

Question

我已经构建了一个web应用程序，该应用程序使用带有两个图像(签名和戳(的mpdf将报告页面创建为PDF，我想将它们组合在同一行，一个在前面，另一个在后面。

我已经尝试过同时使用CSS的位置和z索引，不幸的是仍然不能使用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支持绝对定位，因此您可以将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>