在多个图像上写文本 [英] Write text on top of multiple images

问题描述

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

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

小提琴链接

  .images {display：inline; margin：0px; padding：0px; vertical-align：middle; width：200px;}＃content {display：block; margin：0px; padding：0px;位置：相对; top：90px;身高：自动;最大宽度：自动;溢出-y：隐藏;溢出-x：auto;自动换行：正常;  

< div id = 内容 > < img src =https://i.imgur.com/JaRX6SL.pngclass =images/> < img src =https://i.imgur.com/JaRX6SL.pngclass =images/> < img src =https://i.imgur.com/JaRX6SL.pngclass =images/>< / div>

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

这篇关于在多个图像上写文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！