如何使用 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

要创建包含图像和居中文本的 PDF，您可以使用 HTML2PDF。首先，渲染 HTML 内容：

<div>

登录后复制

接下来，使用 HTML2PDF 将 HTML 转换为 PDF：

require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML(file_get_contents('image-container.html'));
$html2pdf->Output('random.pdf');

登录后复制

请注意，您可能需要稍微调整 CSS 和 HTML 以确保在 HTML2PDF 环境中正确渲染。

以上是如何使用 CSS 将文本置于图像之上？的详细内容。更多信息请关注PHP中文网其他相关文章！