Tailwind CSS 文本覆盖图像问题

Question

我正在尝试编码如下 https://play.tai​​lwindcss.com/5x8mBABcsW

如何将文本放置在圆形图像上？我需要文本在图像底部居中并圆角化。

我还希望能够增加图像的尺寸，并且一切都应该保持比例。

Answer 1

像这样的东西

<div class="relative w-40 h-40 rounded-full overflow-hidden">
  <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="object-cover w-full h-full" />
  <div class="absolute w-full py-2.5 bottom-0 inset-x-0 bg-blue-400 text-white text-xs text-center leading-4">this is a text</div>
</div>

底部元素的高度由填充设置（但您可以使用高度更改它），图像大小由父级处理w-40 h-40- 您可以更改它们。