クリックで丸められた画像をクリックしてください。

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

OK。ここを参照してください。私はあなたが達成したいことを理解したと思う。 助けてくれたら教えてください

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

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