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 ...
随机推荐
- swap扩展
没有独立的分区,本地回环设备(使用软件来模拟实现硬件) 创建一个镜像文件 https://blog.csdn.net/linuxnews/article/details/51271875 有独立的分区
- 2.获取公开的漏洞信息-查询还有哪些系统补丁未堵住-查询exp
本章内容为第一课的实战部分,请结合原创一起浏览. 微软官网 https://www.microsoft.com/zh-cn 在页脚找到TechNet 查看安全公告 MS系列微软编号在微软安全报告中存在 ...
- 框架中的导航框架 & position定位
框架中,通过链接将一个页面显示在另一个框架中: 总框架: <frameset cols="15%,*"> <frame src="xx.html ...
- Keepalived+LVS-DR+Nginx高可用故障切换模式
LVS架构中,不管是NAT模式还是DR模式,当后端的RS宕掉后,调度器依然会把请求转发到宕掉的RS上,这样的结果并不是我们想要的.其实,keepalived就可以解决问题,它不仅仅有高可用的功能,还有 ...
- Python3-join()和split()
Python join()方法 Python join()方法用于将序列中的元素以指定的字符连接生成一个新的字符串. #例如:列表 -- 字符串 str.join(sequence) 参数: sequ ...
- nc 搭建环境流程及问题
1 拷贝目录,包括eclipse及home两个文件夹 2 将jdk环境配置为home里的jdk,现在为1.5 3 在mde development 中设置数据库链接及应用服务及端口号 4 新建mde项 ...
- Chromium Embedded Framework (CEF)_3.2171.2069_v20170606_x86.tar.xz
CEF 为观看各个直播平台而特此修改的浏览器 可以单独提取 Flash 视频, 并可以修改视频的大小等功能 [增加了960x90% 和 1280x90%] 这次修改是主要针对 YY web 直播平台 ...
- Openssl源代码整理学习
一.基础知识 1.Openssl 简史 OpenSSL项目是加拿大人Eric A.Yang 和Tim J.Hudson开发,现在有Openssl项目小组负责改进和维护:他们是全球一些技术精湛的志愿技术 ...
- html常用标签表单和表格等及css的简单入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ASP.NET MVC5入门1之项目创建
本博文参考ASP.NET MVC5入门指南,下载链接: ASP.NET_MVC5_入门指南 1.创建项目 文件 --> 新建 --> 项目 Visual C# --> Web --& ...