css实现上传文件,file按钮用图片显示

在做项目的时候，要做这样的效果：上传文件的时候,file按钮用图片显示。怎么做呢？很纠结。上网查了很多资料，发现都是用js或其他语言实现的。代码很复杂，语言基础不好的人，根本都不了解，不知道什么意思。所以基本上都没有用，然后想了很久，发现css就可以简单实现。

思路如下：父标签里包含input=“file”，img。其中input的透明度为0,img绝对定位在上边。

先发一下效果吧，各大浏览器都兼容哦！

效果图：

点击前：


点击后：


点击这个图片，就可以实现上传效果。说下代码吧！

只要css和html代码哦！

css：

div,input,img{margin:0;padding:0;font-size:12px;}
.filt_box{position:relative;width:90px;height:60px;overflow:hidden;cursor:pointer;}
.filt_box img{position:absolute;left:0;top:0;}
.filt_box input{width:90px;height:60px;display:block;position:absolute;left:0;top:0;z-index:10;filter:alpha(opacity=0);moz-opacity:0;opacity:0;}

html:

<div class="filt_box">
<img src="images/200810251555_btn.gif"/>
<input type="file"/>
</div>