我正在努力使用類似圖像按鈕的個人資料將文本放在圖像下方。如何確保我的文本位于圖像下方并與圖像重疊？如何將圖標放置在圖像的中心？<div class="profile-img-container"> <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> <i class="fa fa-upload fa-5x"></i> </div><input id='uploadfile' type ='file'><p>this text is actually hidden but it should be visible and appear right after the image.</p>請查看我的代碼： http: //jsfiddle.net/aLsxcejn/
3 回答
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
您在規則中添加不必要的內容position: absolute，有一個選項：
$('.profile-img-container').click(function() {
$('#uploadfile').click();
});
#uploadfile {
display: none;
}
.profile-img-container {
position: relative;
width: 20%;
}
.profile-img-container:hover img {
opacity: 0.5;
z-index: 501;
}
.profile-img-container:hover img+i {
display: block;
z-index: 500;
}
.profile-img-container i {
display: none;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
<i class="fa fa-upload fa-5x"></i>
</div>
<input id='uploadfile' type='file'>
<p>this text is actually hidden but it should be visible and appear right after the image.</p>
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
嘗試將以下代碼附加到您的 CSS 中：
.profile-img-container {
position: absolute;
width:20%;
left: 520px;
top: 0px;
}
看看這個代碼
但是如果你想在文本下顯示圖像..嘗試添加：
.profile-img-container {
position: absolute;
width:20%;
left: 0px;
top: 0px;
z-index: -1;
}
- 3 回答
- 0 關注
- 213 瀏覽
添加回答
舉報
0/150
提交
取消