效果图:

代码实现:

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. 多线程内存问题分析之mprotect方法【转】

    转自:https://blog.csdn.net/agwtpcbox/article/details/53230664 http://www.yebangyu.org/blog/2016/02/01/ ...

  2. 华为交换机配置NTP服务端/客户端

    作者:邓聪聪 配置设备作为NTP服务器 单播客户端/服务器模式 # 配置NTP主时钟,层数为2. <HUAWEI> system-view [HUAWEI] ntp refclock-ma ...

  3. codeforces 461div.2

    A Cloning Toys standard input/output 1 s, 256 MB     B Magic Forest standard input/output 1 s, 256 M ...

  4. windows server 2008开启共享文件设置

    之前设置过共享文件,将共享文件映射成磁盘,重新去设置另外服务器的时候,又到网络上找,特此记录 设置网络共享需要开启的服务如下: 以下服务都相关,需要全部开启后才能保证共享正常:1,UPnP Devic ...

  5. 二、消息队列之如何在C#中使用RabbitMQ

    1.什么是RabbitMQ.详见 http://www.rabbitmq.com/. 作用就是提高系统的并发性,将一些不需要及时响应客户端且占用较多资源的操作,放入队列,再由另外一个线程,去异步处理这 ...

  6. jetty去掉项目名称访问

    对于web项目,访问路径是否包含项目名称等修改访问路径的配置方式: 我所使用的是maven进行管理,只需要在pom.xml中进行如下配置 <!-- jetty插件 jetty:run--> ...

  7. 30个mysql千万级大数据SQL查询优化技巧详解

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  8. 45)django-分页实现

    Django提供了一个新的类来帮助你管理分页数据,.它可以接收列表.元组或其它可迭代的对象. 一:常用方法 >>> from django.core.paginator import ...

  9. python-元类的几种单例模式

    单例介绍: 单例即单个的实例,指的是同一个类实例化多次的结果都是指向同一个对象,用于节省内存空间 如果我们从配置文件中读取配置信息来进行实例化,在配置相同的情况下,就没必要重复产生对象浪费内存了. # ...

  10. Codeforces 576E Painting Edges [分治,并查集]

    洛谷 Codeforces 建议阅读这篇博客作为预备.无耻地打广告 思路 与bzoj4025很相似,思路也差不多,可以看上面那篇博客. 仍然是用二分图的充要条件:没有奇环. 然而这题难在每条边的存在时 ...