html - 图像/w边框半径，隐藏溢出和覆盖泄漏

Question

我在一个容器中有一个图像，它的边框半径和溢出设置为隐藏。在容器内部还有一个覆盖图像的元素。叠加层不会覆盖图像的剪裁角。这是我的代码、codepen 和我所指内容的屏幕截图。你如何解决这个问题？我在所有桌面浏览器中都看到了它。

body {
  background: #333;
  padding: 50px;
}

.box {
  width: 200px;
  height: 300px;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}

img {
  width: 200px;
  height: 330px;
        object-fit: cover;
        object-position: center;
}

.overlay {
  padding: 20px;
  background: rgba(0,0,0,.8);
  position: absolute;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-weight: bold;
  font-family: arial;
  font-size: 16px;
}

<div class="box">
  <div class="overlay">Hello world!</div>
  <img src="https://i.imgur.com/HPL2GGA.jpg" />
</div>

https://codepen.io/starkana/pen/oNgNNKV

标签： htmlcss