html - 如何在图像上显示文本并在溢出时向上流动该文本？

Question

我正在获取图像列表并在随机高度网格中显示它们。我想在每张图片上显示一些文字。目前我通过设置文本的顶部边​​距来显示文本，例如:

<div className="item-author" style={{ marginTop: `${item.height - 65}px` }}>
 {item.author}
</div>

那么，现在有两个问题:

我。这是在图像上显示文本的正确方法吗？

二。如何向上溢出这段文字？这段文字超过一行就往下溢出，难看吗？

Answer 1

您可以使用背景图片轻松实现此目的

html

 <div class="back" style="background-image:url('https://picsum.photos/id/659/200/300')" >

<p>Your text goes here</p>

</div>

CSS

   .back{
    background-repeat: no-repeat;
    background: none center/cover #f2f2f2;
    background-size: cover;

/*    tour required width height  */
  width:200px;
  height:200px;
  /* Added flex to overflow the text bottom of the picture */
  display: flex;
  align-items:flex-end;

}

Demo