Question

我正在处理一个图片上传脚本（不是我的），并且在使用css定位构成个人资料图片上传的所有组件时遇到了麻烦。

我想将圆形图像和上传按钮添加到我的网站，但是css的工作方式我似乎无法将上传按钮和图像放在一起。我想知道它是否与css有关：relative / absolute？

如何在我的bootstrap框架网站上添加我想要的html而不是单独移动所有元素？非常感谢

CSS

body {
  background-color: #efefef;
}

.profile-pic {
    max-width: 400px;
    max-height: 400px;
    display: block;
}

.file-upload {
    display: none;
}
.circle {
    border-radius: 1000px !important;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 72px;
}
img {
    max-width: 100%;
    height: auto;
}
.p-image {
  position: absolute;
  top: 240px;
  right: 40px;
  color: white;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-image:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.upload-button {
  font-size: 1.2em;
}

.upload-button:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  color: #999;
}

HTML

<div class="row">
   <div class="small-12 medium-2 large-2 columns">
     <div class="circle">
       <!-- User Profile Image -->
       <img class="profile-pic" src="https://source.unsplash.com/random/300x300">

       <!-- Default Image -->
       <!-- <i class="fa fa-user fa-5x"></i> -->
     </div>
     <div class="p-image">
       <i class="fa fa-camera upload-button"></i>
        <input class="file-upload" type="file" accept="image/*"/>
     </div>
  </div>
</div>

jquery的

$(document).ready(function() {


    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }


    $(".file-upload").on('change', function(){
        readURL(this);
    });

    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

将元素与CSS

0 个答案: