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

Question

我目前正在尝试在图像上添加文本，这相对简单，但是我遇到了障碍。我正在尝试在我设置为一列的图像上添加文本，并且所有文本都在最后一张图像上强制显示(该列是 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>

Answer 1

使用 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;
}