效果图:

代码实现:

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. spring-session+Redis实现Session共享

    关于session共享的方式有多种: (1)通过nginx的ip_hash,根据ip将请求分配到对应的服务器 (2)基于关系型数据库存储 (3)基于cookie存储 (4)服务器内置的session复 ...

  2. 序列化 java.io.Serializable

    1.序列化是干什么的? 简单说就是为了保存在内存中的各种对象的状态,并且可以把保存的对象状态再读出来.虽然你可以用你自己的各种各样的方法来保存Object States,但是Java给你提供一种应该比 ...

  3. SQL 删除的三个语句:DROP、TRUNCATE、 DELETE 的区别

    转载:http://www.runoob.com/sql/sql-delete.html DROP: DROP test; 删除表test,并释放空间,将test删除的一干二净. TRUNCATE: ...

  4. wchar_t*转换string

    场景 wchar[]转换string 实现代码 #include "stdafx.h" #include <iostream> #include <windows ...

  5. windowns下excel2013快速生成月报表

    作者:邓聪聪 windowns下excel快速生成月报表,省去了手工复制繁琐的过程 Sub AutoCopySheets() Dim i, j As Integer i = 1 j = 11 For ...

  6. unity优化建议

    使用Profiler工具分析内存占用情况 System.ExecutableAndDlls:系统可执行程序和DLL,是只读的内存,用来执行所有的脚本和DLL引用.不同平台和不同硬件得到的值会不一样,可 ...

  7. 题解-poj3682King Arthur's Birthday Celebration

    Problem poj-3682 题目大意:抛一次硬币有\(p\)的概率得到正面,当有\(n\)次正面时停止,抛第\(i\)次的花费为\(2i-1\),求抛的期望次数和期望花费 Solution 本来 ...

  8. elasticsearch5.0.1集群排错的几个思路总结

    1.首先查看集群整体健康状态 # curl -XGET http://10.27.35.94:9200/_cluster/health?pretty { "cluster_name" ...

  9. mongodb内建角色

    MongoDB内建角色 数据库用户角色:read.readWrite; 数据库管理角色:dbAdmin.dbOwner.userAdmin: 集群管理角色:clusterAdmin.clusterMa ...

  10. MS SQL Server 增删改查

    数据插入 语法:INSERT INTO Table_name(field1,field2……fieldN) values(value1,vlaue2,…valueN) 单行插入用户类型 INSERT ...