如何将此文本放入图像中？ [复制]答案

【问题标题】：How do i put this text inside the image? [duplicate]如何将此文本放入图像中？ [复制]
【发布时间】：2021-01-22 12:07:59
【问题描述】：

我在把这个文本块放在图像中时遇到了很多麻烦，我想把文本放在黑色箭头所在的位置，我该怎么做，我将不胜感激，谢谢。

.bloco {
  padding-top: 10%;
}

.title {
  font-family: 'Sans', sans-serif !important;
  font-size: 50px !important;
  font-weight: 900 !important;
}

.container-fluid {
  width: 30% !important;
}

<div class="container">

  <div class="bloco">
    <center>
      <h1 class="title">404</h1>
      <img class="img-fluid" src="https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif" />
      <h3 style="postion : relative; top: 10%;">Estás Perdido?</h3>
      <p>Esta página não existe</p>
      <button class="btn-entrar container-fluid" onclick="window.location.href='{{ url()->previous() }}'">Voltar</button>
    </center>
  </div>

</div>

【问题讨论】：

center 标签已过时，不应使用 - 在 bloco 上使用 text-align center 代替。如果您希望 txet 位于其顶部，为什么不将图像用作背景图像？
第一件事！您在 H3 标签中的位置拼写错误。尝试css：h3 {位置：绝对；边距顶部：-10%;}
感谢 Chandrapal Chetan

标签： html css responsive-design

【解决方案1】：

这样试试

h3{
    position: absolute;
    top: -10%;
}

【讨论】：

【解决方案2】：

   <div class="container">
      <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
      <div class="bottom-left">Bottom Left</div>
      <div class="top-left">Top Left</div>
      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>
      <div class="centered">Centered</div>
    </div>
    
    /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

【讨论】：