效果图:

代码实现:

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:;
left:;
width: 53px;
height: 53px;
opacity:;
}

file按钮美化成图片(纯HTML+CSS)的更多相关文章

  1. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  2. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  3. 找出html中的图片、包括css中的图片,读出图片数据转换为base64数据

    <?php echo ">> 图片的地址,css里面的要打单引号\r\n"; echo ">> 相同的图片,使用css实现图片地址只出现一次 ...

  4. 图片纯前端JS压缩的实现

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  5. atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

    atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...

  6. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  7. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  8. 纯HTML+CSS带说明的黄色导航菜单

    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航 在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...

  9. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

随机推荐

  1. JS调用函数时候加括号与只写函数名字的区别 fn与fn()的区别

    经常见插件里面函数调用的时候只写个函数名字,不写函数参数,甚至连括号也不写,比如说: <!DOCTYPE html> <html> <head> <meta ...

  2. Python学习笔记-输入与输出

    一.Python提供了raw_input()和input()两个函数实现数据输入. 1.raw_input() 接收字符串类型的输入数据. str1=raw_input("请输入字符串:&q ...

  3. 2017-2018-2 20165325 实验四《Android程序设计》实验报告

    一.Android程序设计-1 1.检查点要求 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android ...

  4. 关于softmax、argmax、softargmax

    在阅读LIFT:Learned Invariant Feature Transform一文时,文中第1节提到为了保证端到端的可微性,利用softargmax来代替传统的NMS(非极大值抑制)来挑选极值 ...

  5. Graham 扫描法找凸包(convexHull)

    凸包定义 通俗的话来解释凸包:给定二维平面上的点集,凸包就是将最外层的点连接起来构成的凸多边型,它能包含点集中所有的点  Graham扫描法 由最底的一点 \(p_1\) 开始(如果有多个这样的点, ...

  6. MySQL查看表的索引【转】

    查看表的索引: show index from table_name(表名) 结果列表中各字段的含义: · Non_unique 如果索引不能包括重复词,则为0.如果可以,则为1. · Key_nam ...

  7. requests库入门01-环境安装

    最近在项目中写了一个接口自动化测试的脚本,想要写一些文章来一下,方便自己回头来温习,感兴趣的可以跟着看,先写关于requests库的一些基本操作,然后再写整个框架的搭建.使用的是Python3+req ...

  8. host, nslookup, dig、whois

    一.host命令:DNS 查找使用程序 选项与参数: -a :代表列出该主机所有的相关信息,包括 IP.TTL 与除错讯息等等 -l :若后面接的那个 domain 设定允许 allow-transf ...

  9. Date——时间戳转化为YYYY-MM-DD h:m:s时间格式

    /** * example new Date(times) * @param time Date * @param fmt "yyyy-MM-dd" /"yyyy-MM- ...

  10. YUV的数据格式

    一.YUV格式分为两大类:planar(平面)和packed(打包).planar格式,先连续存储所有像素点的Y分量,紧接着存储所有像素点的U,随后存储所有像素点的V.packed格式,每个像素点的Y ...