我从来没有做过太多的CSS,所以如果这是一个明显的问题,我很抱歉,但我已经尝试了一百万件事,但没有任何效果。我目前有一个图像,我正在尝试将其用作上传按钮。现在的问题是它没有标记为文件输入,因此当我调用 uploadFile() 函数时没有选择任何文件,这显然会导致一大堆问题。我发现的许多修复仍然以浏览器附带的默认“上传”按钮结束。
编辑:我看过这篇文章 - 用图像替换输入类型=文件 - 也许我很愚蠢,但我似乎无法让它出现在我想要的屏幕右上角,每当我使用该修复程序时,我都会在屏幕顶部看到一个大的白色条。再说一次,我不太擅长 css,所以我可能错过了一个简单的修复。
Edit2:我基本上想做的正是这个人所做的,但按钮位于页面右侧。 https://stackoverflow.com/a/40235746/9830411
这是 html:
<img id="uploadButton1" class="upperButton" src="./imgs/uploadImage.png" onclick="uploadFile();" onmouseover="toggleChangeLandType();" onmouseout="toggleChangeLandType();">
还有 CSS:
#uploadButton1{
right: 3vw;
}
如果你想做这样的事情用图像替换输入类型=文件,并且只希望按钮位于右侧,也许你的意思是这样的:
<div class="image-upload" align="right">
<label for="file-input">
<img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
</label>
<input id="file-input" type="file" />
</div>
*只需在 div 标签中添加
align="right"
即可。
<div class="avatar-upload">
<div class="avatar-edit">
<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
<label for="imageUpload"></label>
</div>
<div class="avatar-preview">
<div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);">
</div>
</div>
</div>
</div>
.avatar-upload {
position: relative;
max-width: 205px;
margin: 50px auto;
.avatar-edit {
position: absolute;
right: 12px;
z-index: 1;
top: 10px;
input {
display: none;
+ label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all .2s ease-in-out;
&:hover {
background: #f1f1f1;
border-color: #d6d6d6;
}
&:after {
content: "\f040";
font-family: 'FontAwesome';
color: #757575;
position: absolute;
top: 10px;
left: 0;
right: 0;
text-align: center;
margin: auto;
}
}
}
}
.avatar-preview {
width: 192px;
height: 192px;
position: relative;
border-radius: 100%;
border: 6px solid #F8F8F8;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
> div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
}
}