实现图片脱离背景效果并设置图片居中及底部溢出的方法

修改后的代码 #

<div class="text-center flex flex-col relative">
  <div class="hidden md:flex mx-auto flex-row items-center">
    <p class="mr-4 text-white font-extrabold leading-tight text-4xl">Let the music</p>
    <div class="bg-other h-48 w-48 rounded-full relative shadow-lg z-10">
      <img 
        src="Sources/img/assets/people_music_login.png" 
        alt="people" 
        class="object-cover h-[14rem] absolute left-1/2 transform -translate-x-1/2 top-[-1rem]" 
      />
    </div>
    <p class="ml-4 text-white font-extrabold leading-tight text-4xl">carry you away</p>
  </div>
</div>

关键修改点说明 #

• 圆形背景容器：
  • 移除overflow-hidden：让图片能突破圆形边界实现底部溢出效果
  • 添加relative：使内部绝对定位的图片以该容器为参考坐标
• 图片元素：
  • 替换固定偏移left-12为left-1/2 + transform -translate-x-1/2：实现图片水平居中，适配容器尺寸变化
  • 增大图片高度（如h-[14rem]）并设置top-[-1rem]：让图片向上偏移，底部自然溢出圆形容器
  • 保留object-cover：确保图片比例正常，避免拉伸变形

额外优化提示 #

• 可调整top数值或图片高度，精准控制底部溢出的幅度
• 若需突出图片底部内容，可添加object-position:center bottom属性，优先显示图片下半部分

内容的提问来源于stack exchange，提问作者Peter_Griffindor