file按钮美化成图片(纯HTML+CSS)
2016-06-02 15:58
330 查看
效果图:
代码实现:
html:
CSS:
代码实现:
html:
<div> <h2>上传头像</h2> <p class="fs18">(请上传200X200px大小的JPEG或PNG图片)</p> <form> <a class="btn_addPic mlr-auto" href="javascript:void(0);"> <img src="img/添加_关闭按钮.png"/> <input class="filePrew" type="file" name="pic"> </a> </form> </div>
CSS:
.btn_addPic{ display: block; position: relative; width: 53px; height: 53px; overflow: hidden; cursor: pointer; text-align: center; } .filePrew { display: block; position: absolute; top: 0; left: 0; width: 53px; height: 53px; opacity: 0; }
相关文章推荐
- 垂直居中的几大方法
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
- CSS
- ElasticsSearch——HighLights
- 审查慕课网“实战”页面发现的CSS属性用法
- CSS绘图:墙
- css控制文字长度,超出长度显示...
- iOS设置状态栏样式,statusBarStyle
- css布局
- css3实现手风琴效果
- 倒计时Button,及Button样式
- 封装函数获取样式
- 【CSS 杂记】
- CSS基础学习笔记
- css——子代与后代选择器
- css3 绘图 (跳动的心 和太极图)
- CSS Web安全字体组合
- CSS 实现 LI 鼠标…
- 让IE浏览器支持CSS3圆角属性的方法
- CSS3详解:border-radius 比如:圆…