圆形可点击的个人资料图片，底部有一个按钮

Question

我想创建一个圆形可点击的个人资料图片，底部有一个按钮。我可以为普通图像做到这一点但是当涉及到圆形图像时，按钮的大小与容器的大小相同，此图像和按钮可用。 感谢

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

确定。看这里。我想我明白你想要实现的目标。 让我知道它是否有帮助

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以尝试这个：

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

 text-align:center;
 width:100%;
 background:white;
 bottom:0;

 padding:20px 0;
 opacity:.5
}
.img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}

Here Updated Fiddle