Не можете понять, почему это не должно работать? если я использую простой img с src, то он работает, но когда я пытаюсь изменить его на change background
, то нет. Я приложил код, как я могу изменить фон с помощью jQuery? Я пытаюсь сделать вариант изменения профиля для пользователя. Поэтому, если он меняет картинку, то Background-image
также меняется на новую загруженную.
$("#ChangeImg").click(function(e) {
$("#imageUpload").click();
});
function fasterPreview(uploader) {
if (uploader.files && uploader.files[0]) {
document.getElementById(imgDivEdit).style.backgroundImage = uploader.files[0];
}
}
$("#imageUpload").change(function() {
fasterPreview(this);
});
#imageUpload {
display: none;
}
.container {
position: relative;
width: 125px;
height: 125px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 125px;
width: 125px;
opacity: 0;
transition: .5s ease;
background-color: rgba(11, 90, 180, 0.795);
border-radius: 50%;
}
.container:hover .overlay {
opacity: 0.7;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
cursor: pointer;
}
#imgDivEdit {
width: 125px;
height: 125px;
background-image: url("https://www.whatsappprofiledpimages.com/wp-content/uploads/2019/01/Nice-Whatsapp-DP-Profile-Images-4-300x300.jpg");
background-position: 5px -5px;
border-radius: 50%;
background-size: cover;
}
<div id="avatar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="imgDivEdit"></div>
<div id="ChangeImg" class="overlay">
<div class="text">Change Image</div>
</div>
</div>
</div>
<input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture>