如何使用 CSS 將文字置於圖像之上？

使用 CSS 在圖片上定位文字

本文將示範如何使用 CSS 在圖片上居中對齊文字。

問題場景

您可能會遇到以下情況情況：

<div class="image">
    <img  src="/static/imghwm/default1.png" data-src="sample.png" class="lazy" alt="如何使用 CSS 將文字置於圖像之上？" >
    <div class="text">
       <h2 id="Some-text">Some text</h2>
    </div>
</div>

使用以下CSS：

.image {
    position: relative;
}

h2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    width: 300px;
    height: 50px;
}

但文字仍然未對齊。

解

使用CSS 定位

要將文字放置在影像上，請使用CSS定位：

<div class="image-container">
    <img  src="/static/imghwm/default1.png" data-src="sample.png" class="lazy" alt="如何使用 CSS 將文字置於圖像之上？" >
    <div class="text-container">
       <h2 id="Some-text">Some text</h2>
    </div>
</div>

.image-container {
    position: relative;
}

.text-container {
    position: absolute;
    top: 50%;  /* Position the text vertically */
    left: 50%;  /* Position the text horizontally */
    transform: translate(-50%, -50%);  /* Center the text */
    color: white;
    font-size: 24px;
    text-align: center;
}

使用z-index進行重疊

為了確保文字覆蓋影像，請使用z-index:

.text-container {
    z-index: 1;
}

替代方法

使用HTML2PDF

使用HTML2PDF

<div>要建立包含影像和居中文字的PDF，您可以使用HTML2PDF。首先，渲染HTML 內容：<p></p>
<pre class="brush:php;toolbar:false">require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML(file_get_contents('image-container.html'));
$html2pdf->Output('random.pdf');

接下來，使用HTML2PDF 將HTML 轉換為PDF：

請注意，您可能需要稍微調整CSS 和HTML 以確保在HTML2PDF環境中正確渲染。