当我将图标显示在图像上时.但我想显示这样的图标
当我点击时,它应该允许浏览像这样的文件
<input type ='file'>
我怎样才能做到这一点?
我试着把文件标签放到所有,但它没有用.我怎样才能做到这一点?
.profile-img-container { position: absolute; width:50%; } .profile-img-container img:hover { opacity: 0.5; z-index: 501; } .profile-img-container img:hover + i { display: block; z-index: 500; } .profile-img-container i { display: none; position: absolute; margin-left:43%; margin-top:40%; } .profile-img-container img { position:absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.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>
解决方法
您需要在代码中添加输入[type =“file”]并使其不可见.此外,它需要所有的img位置,将它的位置设置为绝对和所有其他样式,以便它占据所有位置.
像这样:
.profile-img-container { position: absolute; /*width:50%;*/ /*border-radius:50%;*/ overflow:hidden; } .profile-img-container img:hover { opacity: 0.5; z-index: 501; } .profile-img-container img:hover + i { display: block; z-index: 500; } .profile-img-container .icon-wrapper { position: absolute; bottom:0; left:0; background:rgba(0,0.7); color:#fff; text-align:center; width:100%; padding:5px; } /*.profile-img-container img { position:absolute; }*/ /*.profile-img-container { position:relative; }*/ input[type="file"] { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <div class="profile-img-container img-circle"> <input type="file" /> <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> <div class="icon-wrapper"> <i class="fa fa-upload fa-5x"></i> </div> </div>
原文地址:https://www.jb51.cc/html/242541.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。