时间戳

首页 > 解决方案 > 使用 CSS 位置或 z-index 的图像上的图像不适用于 mpdf

css - 使用 CSS 位置或 z-index 的图像上的图像不适用于 mpdf

问题描述

我已经构建了 Web 应用程序，该应用程序使用 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'; ?>" />

有没有人有解决这个问题的方法？

谢谢

标签： cssmpdf

解决方案

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>

推荐阅读