html - 隐藏在容器上的 CSS 边框半径和溢出使内容渗透 1 px

Question

我有以下代码：

https://jsfiddle.net/uq2018xv/3/

body {
  background: black;
  font-family: sans-serif;
}

.container {
  height: 200px;
  width: 200px;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
}

.container>img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.container>span {
  background: #2b2b2c;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0pt 0 2pt;
  text-align: center;
  font-weight: 600;
  font-size: 20pt;
  color: white;
}

<div class="container">
  <img src="https://images.unsplash.com/flagged/photo-1593005510329-8a4035a7238f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80">
  <span>EDIT</span>
</div>

内容在底部渗透 1px。有没有办法解决这个问题，让它看起来更干净？

标签： htmlcss

Answer 1

我想出了解决方案。通过设置：

clip-path: inset(0px 0px HEIGHT_OF_EDIT_SPAN 0px);

在图像上。

其中 HEIGHT_OF_EDIT_SPAN 是底部 EDIT 跨度的高度。

所以它会在底部剪辑图像，但仍然保持图像居中。