在做项目的时候,要做这样的效果:上传文件的时候,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="/img.aspx?v=aW1hZ2VzLzIwMDgxMDI1MTU1NV9idG4uZ2lm"/>
<input type="file"/>
</div>
http://kaifazhe001.com/article/chenegxin800-6459667.html