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);
}