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

Question 1

Я создал веб-приложение, которое создает страницу отчета в формате 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'; ?>" />

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

Спасибо

css mpdf

2

Angga Rifandi 17 Апр 2020 в 14:17

Answer

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>

2

Jake Jackson 24 Апр 2020 в 06:14

Question 2

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>

2

Jake Jackson 24 Апр 2020 в 06:14

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

1 ответ

Похожие вопросы

Новые вопросы

css