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

Answer 2

我试图在工作示例中扩展和转换@Aryan Twanju的答案。请通过运行下面给出的代码来查看它，如果您正在寻找它或其他不同的东西，请告诉我们。

＆＃13;

.column {
  float: left;
  width: 33.33%;
  padding: 0px;
  position: relative;
  box-sizing: border-box;
  padding: 0 5px;
}

.column .overlay {
  position: absolute;
  text-align: center;
  color: #FFF;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  font-family: Arial;
  font-size: 20px;
  padding: 10px;
  font-weight: bold;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

＆＃13;

<div class="row">
  <div class="column">
    <div class="overlay">
      Sample Text 1
    </div>
    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
      Sample Text 2
    </div>
    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="sampletext" style="width:100%">
  </div>
  <div class="column">
    <div class="overlay">
      Sample Text 3
    </div>
    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="sampletext" style="width:100%">
  </div>
</div>

＆＃13;

谢谢， Jignesh Raval

Answer 3

如果您使用的是Chrome，（我不了解Firefox或Edge）请打开开发人员工具。使用选择元素工具。单击您的文本。它应该告诉您元素或div实际有多大。如果很小，请使用css使其位于其中，或者使p元素本身更大。

如何在列图像上添加文本

3 个答案: