当上方有一个绝对定位的同级div时，白色图片的边缘就会露出

前端开发 2026-07-10

我正在尝试在一个 <img> 上方创建一个覆盖层 <div>。该覆盖层默认可见，悬停时会消失。

<!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">
    <div class="absolute w-full h-full bg-black rounded-2xl"></div>
    <img
      src="https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA1L3BmLXMxMjQtYWstMjYxNV8yLmpwZw.jpg"
      alt="white img"
      class="rounded-2xl w-full h-full object-cover"
    />
  </div>
</body>
</html>

解决方案

白边通常是因为绝对定位的覆盖层与图像的圆角被分别进行抗锯齿处理所致。尽管两者都使用 rounded-2xl，浏览器对每一层的平滑处理略有不同，因此会出现微小的白角透出。

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-gray-500 p-4">
  <!-- Solution -->
  <div class="relative overflow-hidden w-40 h-40 rounded-2xl">
    <div class="absolute inset-0 bg-black z-10"></div>
    <img
      src="your-image.jpg"
      class="w-full h-full object-cover"
    />
  </div>
</div>

你也可以使用 inset-0 代替 w-full h-full，以获得更干净的绝对定位。

我在 html viewer 中测试过，它能够可靠地去除角落溢出的问题。

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。