如何使用 CSS 将文本置于图像上方？

使用 CSS 将文本在图像上居中

在本文中，我们将探索使用 CSS 将文本在图像上居中的技术。

简单解决方案

实现基本文本以图像为中心，采用以下步骤：

• 对文本元素使用position:absolute。
• 将 left 属性设置为 0，将 width 属性设置为 100%。
• 水平居中文本，边距：0 auto.

示例：

<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>

.image {
   position: relative;
}

.text {
   position: absolute;
   left: 0;
   width: 100%;
   margin: 0 auto;
}

使用 z-Index

来确保文本出现在图像上，将 z-index 应用于值高于图像的文本元素z-索引。

示例：

<div><pre class="brush:php;toolbar:false">#container {
    height: 400px;
    width: 400px;
    position: relative;
}

#image {
    position: absolute;
    left: 0;
    top: 0;
}

#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
}