图像问题上的 Tailwind CSS 文本答案

【问题标题】：Tailwind CSS text over image problems图像问题上的 Tailwind CSS 文本
【发布时间】：2021-09-16 04:02:29
【问题描述】：

我正在尝试编写如下代码 https://play.tailwindcss.com/5x8mBABcsW

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

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

【问题讨论】：

【解决方案1】：

类似this

<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 处理 - 您可以更改它们。

【讨论】：

非常感谢！！

【解决方案2】：

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

OR-

<div class="relative w-40 h-40">
        <img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="rounded-full w-full h-full" />
        <div class="absolute w-full h-full top-0 left-0 rounded-full bg-blue-400 text-white text-xs flex justify-center items-center opacity-0 hover:opacity-90">this is a text</div>
      </div>

我认为您将尝试使用此代码- 此外，您将更改或调整值-

【讨论】：

哪个代码？哪个文字？你能解释更多吗？
对不起我的错误。请原谅我。现在我的代码完美可见。