如何在列图像上添加文本答案

【问题标题】：How Do I Add Text Over Column Images如何在列图像上添加文本
【发布时间】：2018-10-06 04:38:56
【问题描述】：

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

【问题讨论】：

嗨@David，您能否提供带有文本的代码示例或有关其当前外观的屏幕截图。这将有助于我正确理解您的问题。
我确实添加了上面的代码

标签： html css image text

【解决方案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;
}

【讨论】：

你能分享你的完整代码和截图吗，因为这应该可以工作。

【解决方案2】：

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

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

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

谢谢，吉涅什·拉瓦尔

【讨论】：

【解决方案3】：

如果您使用的是 chrome，（我不知道 firefox 或 edge）打开开发者工具。使用选择元素工具。点击你的文字。它应该向您显示它实际所在的元素或 div 有多大。如果很小，用css把它所在的div变大，或者p元素本身变大。

【讨论】：