比如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处理-你可以改变它们。

import React from 'react';
import hero from '../assets/img/hero-bg.jpg';
const Hero = () => {
  return (
    <div className='w-full h-screen'>
      <img
        className='top-0 left-0 w-full h-screen object-cover'
        src={hero}
        alt='/'
      />
      <div className='bg-black/30 absolute top-0 left-0 w-full h-screen' />
      <div className='absolute text-2xl md:text-7xl text-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
        <p className='tex-red-700'>I am Morgan Freeman</p>
      </div>
    </div>
  );
};

export default Hero;

<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>

我想你会尝试用这个代码-而且，你会改变或调整值-