目的:记录下自己平时编写的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);
}