,可以通过以下步骤实现:
以下是一个示例的HTML和CSS代码:
HTML代码:
<div class="container">
<img src="image.jpg" alt="图像">
<p>文本内容</p>
</div>
CSS代码:
.container {
position: relative;
width: 300px; /* 根据实际情况设置容器的宽度 */
height: 300px; /* 根据实际情况设置容器的高度 */
}
.container img {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.container p {
position: absolute;
left: 0;
top: 0;
color: white; /* 根据实际情况设置文本颜色 */
font-size: 18px; /* 根据实际情况设置文本大小 */
}
这样,图像就会在页面中心对齐,并覆盖在文本上方。你可以根据实际情况调整容器的宽度、高度、图像路径、文本内容、文本样式等。
领取专属 10元无门槛券
手把手带您无忧上云