absolute同级div作为图片overlay时白色图片边缘漏出问题

问题根源是你同时给覆盖层<div>和<img>设置了rounded-2xl，浏览器渲染两个独立圆角元素时，抗锯齿处理会产生细微缝隙，透出下方背景。

直接按以下方式调整：

• 只保留父容器的rounded-2xl和overflow-hidden，让父容器统一裁剪子元素的圆角
• 移除覆盖层和图片的rounded-2xl类
• 给覆盖层添加hover:opacity-0 transition-opacity，实现悬停消失的平滑效果

修改后的代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-dvh bg-gray-900 flex items-center justify-center">
  <div class="relative overflow-hidden w-40 h-40 rounded-2xl">
    <div class="absolute w-full h-full bg-black hover:opacity-0 transition-opacity"></div>
    <img
      src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3BmLXMxMjQtYWstMjYxNV8yLmpwZw.jpg"
      alt="white img"
      class="w-full h-full object-cover"
    />
  </div>
</body>
</html>

原理：父容器的overflow-hidden会裁剪掉所有超出圆角范围的子元素内容，覆盖层和图片无需单独设置圆角，由父容器统一控制，彻底消除两个圆角元素叠加产生的缝隙问题。

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