一 label
<input type="file" id="male" style="display: none;"></input>
<label for="male" style="background:url(‘http://fgg.natali.com.cn/resources/images/1.jpg‘);width:130px;height:130px;display: block;"></label>
lable标签的 for属性等于input的id,然后设置input隐藏就可以,然后设置这个lable的各种样式就是代表了这个input,这个是简单的方法
二 用div设置img图片,input绝对定位覆盖这个div,然后input设置opcity:0
.box{
position: relative;width:130px;height:130px;
}
#file{
width:100%;height:100%;
position:absolute;z-index: 5;left: 0;top: 0; cursor: pointer;
opacity: 0;
}
.dimg{
position: relative;width: 100%;height: 100%; cursor: pointer;
}
<div class="box">
<input type="file" id="file"></input>
<div class="dimg">
<img src="http://fgg.natali.com.cn/resources/images/1.jpg">
</div>
</div>
这个方法的就是 input是透明的 opcity:0;虽然肉眼看不见,但是它还是有宽高的占据了文档的位置,鼠标看似点击了图片,其实还是点击了input框框,只不过这个input框框透明了而已。这个方法和方法1可以达到同样的效果,但是麻烦,推荐方法1。
这里的input是flie 也可以用其他的type