html - 圆形可点击个人资料图像，底部有一个按钮在 css 中

Question

我想制作一个圆形的可点击个人资料图片，底部有一个按钮。我可以为普通图像执行此操作，但是当涉及到圆形图像时，按钮将占用该图像和按钮可用的容器的大小。 谢谢

.img-circle {
  border-radius: 50%;
}

<div class="img-thumbnail img-circle">
  <div style="position: relative; padding: 0; cursor: pointer;" type="file">
    <img class="img-circle" style="width: 140px; height: 140px;" >
    <span style="position: absolute; color: red; bottom: 20px; left: 40px;">UPLOAD</span>
  </div>
</div>

Answer 1

好的。看这里。我想我明白你想要达到的目标。 让我知道是否有帮助

注意:img.img-circle {background:black; } 仅用于示例目的，因此您可以看到 img 应该在哪里。在你的代码中你不必包含这个

.img-circle {
  border-radius: 50%;
}
img.img-circle {
  background:black;
}
span {
 left:0;
 text-align:center;
 width:100%;
 background:rgba(255,255,255,0.5);
 bottom:0;
 padding:20px 0;
}
.img-thumbnail {
border-radius: 0;
display:inline-block;
background:#dbdbdb;
padding:20px;
 }
.img-thumbnail > div {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
-webkit-box-shadow: 0 2px 0 2px #333;
box-shadow: 0 2px 0 2px #333;
border-radius:50%;
}

<div class="img-thumbnail img-circle">
  <div style="position: relative; padding: 0; cursor: pointer;" type="file">
    <img class="img-circle" style="width: 140px; height: 140px;" >
    <span style="position: absolute; color: red; ">UPLOAD</span>
  </div>
</div>
<div class="img-thumbnail img-circle">
  <div style=" position: relative;padding: 0; cursor: pointer;" type="file">
    <img class="img-circle" style="width: 140px; height: 140px;" >
    <span style="position: absolute; color: red; ">UPLOAD</span>
  </div>
</div>