时间戳

首页 > 解决方案 > 如何在列图像上添加文本

html - 如何在列图像上添加文本

问题描述

我目前正在尝试在图像上添加文本，这相对简单，但是，我遇到了障碍。我正在尝试在我设置为一列的图像上添加文本，并且所有文本都强制在最后一个图像上（该列是 3 列乘 1 行）。

帮助？

这是我正在使用的代码：

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
<div class="row">
  <div class="column">
    <img src="./bin/images/lecture.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <img src="./bin/images/identify.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <img src="./bin/images/roadmap.jpg" alt="sampletext" style="width:100%">
  </div>
</div>

标签： htmlcssimagetext

解决方案

使用 css 属性position: relative，position: absolute可以回答您的问题。试试这个代码。

<div class="row">
  <div class="column">
    <div class="overlay">
    sample text 1
    </div>
    <img src="./bin/images/lecture.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
    sample text 2
    </div>
    <img src="./bin/images/identify.jpg" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
    sample text 3
    </div>
    <img src="./bin/images/roadmap.jpg" alt="sampletext" style="width:100%">
  </div>
</div>

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
  position: relative;
}
.column .overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

推荐阅读