Изображение поверх изображения с использованием позиции CSS или z-index не работает с использованием mpdf - PullRequest
Новая
       21

Изображение поверх изображения с использованием позиции CSS или z-index не работает с использованием mpdf

0 голосов
/ 17 апреля 2020

Я создал веб-приложение, которое создает страницу отчета в PDF с использованием mpdf с двумя изображениями, подписью и печатью, и я хочу объединить их в одну строку, одну спереди и другую сзади.

Я пытался использовать CSS и position, и 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'; ?>" />

У кого-нибудь есть решение для решения этой проблемы?

Спасибо

1 Ответ

0 голосов
/ 24 апреля 2020

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>
...