如何使用 CSS 將文字置於圖像之上？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-12-19 22:58:11

原創

112 人瀏覽過

How to Center Text Over an Image Using CSS?

使用 CSS 在圖片上定位文字

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

問題場景

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

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>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="sample.png"/>
    <div class="text-container">
       <h2>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

<div>

登入後複製

要建立包含影像和居中文字的PDF，您可以使用HTML2PDF。首先，渲染HTML 內容：

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環境中正確渲染。

以上是如何使用 CSS 將文字置於圖像之上？的詳細內容。更多資訊請關注PHP中文網其他相關文章！