在多个图像上写文本 | 在多个图像上写文本

本文介绍了在多个图像上写文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试过多种解决方案（我只知道基本的html和css），但他们没有一个真的为我工作（有时当我调整窗口大小，文本重叠成像仪等）

在下面的小提琴我有3图像对齐，在每个图像中写入文本堆栈。我怎么能使用HTML在Stack旁边的每个图像中写入Overflow？

    
 
  
 
  .images {display：inline; margin：0px; padding：0px;垂直对齐：中部;宽度：200像素; height：auto;}＃content {display：flex; justify-content：center; flex-wrap：wrap;}＃content div {position：relative;} h2 {position：absolute; top：8px; left：100px;}  
 < div id =content > < DIV> < H2>溢出< / H2> < img src =https://i.imgur.com/JaRX6SL.pngclass =images/> < / DIV> < DIV> < H2>溢出< / H2> < img src =https://i.imgur.com/JaRX6SL.pngclass =images/> < / DIV> < DIV> < H2>溢出< / H2> < img src =https://i.imgur.com/JaRX6SL.pngclass =images/> < / div>< / div>  
 
 
I have been trying to place multiple images on a HTML and write text in each image I place.
I've tried multiple solutions (I only know basic html and css) but none of them actually worked for me (sometimes when I resize the window, the text overlaps the imager and so on)
In the fiddle below I have 3 images aligned, with the text "Stack" writen in each image. How could I write "Overflow" inside each image next to the "Stack" using HTML ?
Fiddle link  
.images {
  display: inline;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
  width: 200px;
}

#content {
  display: block;
  margin: 0px;
  padding: 0px;
  position: relative;
  top: 90px;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
}
<div id="content">
  <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
  <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
  <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
</div>
 解决方案 
How about wrapping your images with div tag and then using absolute positioning. Something like this:
.images {
    display: inline;
    margin: 0px;
    padding: 0px;
    vertical-align:middle;
    width:200px;
    height: auto;
}
#content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#content div {
    position: relative;
}

h2 {
  position: absolute;
  top: 8px;
  left: 100px;
}
<div id="content">
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
    <div>
      <h2>Overflow</h2>
      <img src="https://i.imgur.com/JaRX6SL.png" class="images" />
    </div>
</div>
                        这篇关于在多个图像上写文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！