如何使用 flexbox 在图像上正确放置文本 [重复]答案

【问题标题】：How to correctly place text over an image using flexbox [duplicate]如何使用 flexbox 在图像上正确放置文本 [重复]
【发布时间】：2020-08-24 15:43:36
【问题描述】：

我试图在包含图像和文本的 div 的左上角放置一些文本。我可以使用 CSS 绝对定位让它工作，但是文本没有响应并且根据屏幕大小移动。我需要文本具有响应性并根据屏幕大小进行调整，使其相对于图像保持在相同的位置。

我也在使用引导程序，我认为它没有效果，但它可能是我不知道的深层次的东西。

这是我目前使用的代码：

HTML

<div class="container-fluid"> 
  <div class="col-md-12 d-flex jumbo">
    <img class='img-fluid jumbo-image' 
         src= 'https://i.postimg.cc/8cXs8gZ9/working-horse.jpg' />
    <h2 class='jumbo-text'>Jungers Farm</h2>
</div>

CSS

.jumbo {
  position: relative;
}

.jumbo-image {
  margin-top: 85px;
  box-shadow: 15px 15px grey;
}

.jumbo-text {
  display: inline-block;
  font-size: 3em;
  color: #3386ff;
  text-shadow: 2px 2px 5px red;
  position: absolute;               /* remove from document flow */
  left: 5%;                         /* Left */
  top: 18%;                         /* Top */
}

正如您在下面的代码笔中看到的那样，文本没有响应，并且随着屏幕的变化在图像上移动。因此，我的定位不是左直的原因：0％和顶部：0％。但是当屏幕大于 768px 时，它通常看起来或多或少是我想要的。

Codepen

以下是我尝试使用 flexbox，但文本显示在右侧的屏幕之外：

Codepen

这甚至可以通过 flexbox 实现吗？如果没有，是否可以使用直接的 CSS Absolute 定位方法让文本响应？

【问题讨论】：

我已经能够至少模仿使用 flexbox 和直接 CSS 的行为。但是，我仍然无法让它在文本大小和定位方面都做出响应。我是否必须使用@media 查询才能使其正常工作？还是我还缺少其他东西？
我能够通过以下更改解决此问题：

标签： html css flexbox css-position absolute

【解决方案1】：

因此，如果我正确理解您的问题，问题是当视口大小更新时，图像会相应缩放，从而导致文本不再位于图像的所需部分。一种可能的解决方法是删除 img 标记并将其设置为父 div 的背景图像。然后您可以绝对定位您的 h2 标签，无论视口大小如何，您的文本都将始终保留在背景图像上。当然，使用这种方法，您必须明确设置父 div 的宽度和高度，或者使用 padding-bottom 技巧来设置高度。

<div class="container-fluid"> 
<div class="col-md-12 d-flex jumbo" 
style="background:url(https://i.postimg.cc/8cXs8gZ9/working-horse.jpg); 
background-position:center center; background-size:cover; background- 
repeat:no-repeat; width:100%; padding-bottom:65%;">
  <h2 class='d-flex jumbo-text'>Jungers Farm</h2>
</div>

【讨论】：