MPDF加载CSS失败：PDF生成时文字无法叠加至指定图片位置

It sounds like you're hitting a common snag with mPDF: external stylesheets can sometimes fail to load properly, especially when dealing with positioning that needs precise layout control. Let's walk through a few reliable fixes to get your text positioned above the image as intended.

1. Inline Your CSS Directly in the HTML (Most Reliable) #

mPDF handles inline styles far more consistently than external stylesheets. Instead of relying on an external style.css, move your styles into a <style> tag inside your HTML's <head>, or even directly onto the elements themselves.

Modified HTML Example (index12.html): #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        .image-container {
            position: relative;
            /* Set dimensions matching your image */
            width: 400px;
            height: 300px;
        }
        .image-name {
            position: absolute;
            top: 20px; /* Adjust to your desired vertical position */
            left: 50%;
            transform: translateX(-50%); /* Center horizontally */
            color: #fff; /* Example text color */
            font-size: 20px;
            z-index: 10; /* Ensures text sits above the image */
            text-shadow: 1px 1px 2px #000; /* Optional: improve readability */
        }
        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <div class="image-name">Your Image Name Here</div>
        <img src="path/to/your/image.jpg" alt="Target Image">
    </div>
</body>
</html>

Simplified PHP Code: #

Since the styles are now embedded in the HTML, you don't need to load the external stylesheet separately:

<?php
$html = file_get_contents('index12.html');
require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML($html); // No need for separate style loading
$mpdf->Output('output.pdf', 'D'); // 'D' forces download; adjust as needed
?>

2. Ensure External Stylesheet Path Is Correct #

If you prefer keeping styles external, double-check that file_get_contents('style.css') is using the correct path. Relative paths can be tricky in PHP, so use an absolute path to avoid loading failures:

$stylesheet = file_get_contents(__DIR__ . '/style.css'); // Uses current directory as root

Also, confirm that your CSS uses mPDF-supported properties. Positioning (position: relative/absolute), z-index, and basic layout properties are all supported, but avoid overly complex CSS features like flexbox gaps (some older mPDF versions have limited support).

3. Inline Styles Directly on Elements #

For absolute certainty, you can apply styles directly to each element via the style attribute. This eliminates any chance of stylesheet loading issues:

<div style="position: relative; width: 400px; height: 300px;">
    <div style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 20px; z-index: 10;">Your Image Name</div>
    <img style="width: 100%; height: 100%; object-fit: cover;" src="path/to/image.jpg" alt="Image">
</div>

Why This Works #

mPDF parses HTML and CSS differently than browsers. External stylesheets can fail due to path resolution, caching, or compatibility gaps. Inlining styles ensures mPDF reads the layout rules directly when processing the HTML, leading to consistent results.

内容的提问来源于stack exchange，提问作者axelonet