file按钮美化成图片(纯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:;
left:;
width: 53px;
height: 53px;
opacity:;
}
file按钮美化成图片(纯HTML+CSS)的更多相关文章
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- input file样式修改,图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- 找出html中的图片、包括css中的图片,读出图片数据转换为base64数据
<?php echo ">> 图片的地址,css里面的要打单引号\r\n"; echo ">> 相同的图片,使用css实现图片地址只出现一次 ...
- 图片纯前端JS压缩的实现
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- 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. 不要 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- 原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
- 纯HTML+CSS带说明的黄色导航菜单
HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航 在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...
- File控件选择图片的时候在Html5下马上预览
页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...
随机推荐
- centos6.5环境安装zookeeper-3.4.5
1.将zookeeper-3.4.5.tar.gz压缩包拷贝到/usr/local/src, 并用如下命令解压 tar -xzf zookeeper-3.4.5.tar.gz 2.在zookeepe ...
- DataGrid 查出一个列 按要求显示格式 例如:操作人(地点)
这是转换DataGrid显示格式之后 连接字符串的方法 显示:操作人(地点) public static ObservableCollection<CListModel> AllUserL ...
- HTML5 头部【快速编写】
<!doctype html> <html><head> <meta charset="utf-8">#设置网页文件展示时使用的字符 ...
- Faster_RCNN 4.训练模型
总结自论文:Faster_RCNN,与Pytorch代码: 本文主要介绍代码最后部分:trainer.py .train.py , 首先分析一些主要理论操作,然后在代码分析里详细介绍其具体实现.首先 ...
- 应用 XAF 开发移动手机应用
应用 XAF 开发移动手机应用: 1. How to create a native mobile or lightweight web client UI based on the existing ...
- vue后台项目记录
1.当我们用axios进行接口访问时,必须同时使用Qs,否则后端接收不到所传的数据! npm 安装qs,然后引用 import Qs from 'qs' // 创建axios实例 const serv ...
- 关于第一个java程序HelloWorld的感慨
今天入手第一个java程序,严格意义上来讲,是真正开始研究java的第一个“Hello World": 1.没有用自动提示,虽然System.out.println()还是自动蹦出来了,但是 ...
- ARX工程必须使用release模式编译
在添加如下代码保证debug版本的arx文件也是使用MFC的release库 // 'DEBUG workaround' below prevents the MFC or ATL #includ ...
- C#winform 窗体缩放自适应
1. 首先在窗体上放上一个Panel容器,并将容器的Dock属性设为Fill,即所有的控件都放在了这个容器里. using System; using System.Collections.Gene ...
- 【原创】大数据基础之Hive(4)hive元数据库核心表结构
1 dbs +-------+-----------------------+----------------------------------------------+------------+- ...