站点图标 独书先生

HTML通用组件模板:点击上传图片HTML组件 | CSS

目的:记录下自己平时编写的HTML组件,抽离常用的HTML元素组合,添加基础CSS样式,之后的项目稍作修改即可实现复用,提高工作效率。

解析:点击上传图像框,实际点击隐藏的input,上传完成后,图片显示在原处的img标签内。

HTML:

<div class="upload-pic"><i class="iconfont icon-jia1"></i>
<button>点击添加</button>
<img alt="" />
<input type="file" /></div>

CSS:

button{border:none;outline:none;}

.upload-pic{
position: relative;
width:70px;
height:70px;
border:1px dashed rgb(179,179,179);
color:rgb(179,179,179);
}

.upload-pic>i.iconfont{
display: block;
margin:0 auto;
padding:9% 25% 1% 25%;
font-size: 35px;
color:rgb(179,179,179);
}
.upload-pic>button{
margin:0 7%;
background:#fff;
color:rgb(179,179,179);
font-size:12px;

}
.upload-pic>img{
position: absolute;
top:0;
right:0;
width:70px;
height:70px;
z-index:2
}
.upload-pic>input{
position: absolute;
top:0;
right:0;
width:100%;
height:100%;
z-index:3;
opacity:0;
filter:alpha(opacity=0);
}

JS Bin on jsbin.com

退出移动版