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 ...
随机推荐
- java中equals,hashcode和==的区别
https://www.cnblogs.com/kexianting/p/8508207.html
- 欢迎使用 MWeb-Test
首先介绍一下 MWeb 是什么,MWeb 是专业的 Markdown 写作.记笔记.静态博客生成软件. 然后这里重点说明一下:MWeb 有两个模式,外部模式和文档库模式.外部模式中把本地硬盘或 Dro ...
- Delphi 三层框架 DataSnap 的服务器端设置
elphi 三层框架 DataSnap 的服务器端设置: DataSnap 框架有三个模块:DataSnap Server,Server Module,DataSnap Client Module. ...
- 在 uniGUI 中实现自动弹窗后延迟几秒关闭 — Toast 功能
在 uniGUI 中实现自动弹窗后延迟几秒关闭 — Toast 功能. uniGUI 的客户端使用 EXTJS 6 ,本就有 Toast 功能. 但UniGui 官方没有相应的控件,我们如何使用 EX ...
- Python运维开发基础09-函数基础【转】
上节作业回顾 #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen # 实现简单的shell命令sed的替换功能 import ...
- C# 操作文件类,文件夹存在判断,创建,文件内容读写。
此篇文档是老早就放到草稿箱中了,断断续续编辑了几次.结合自己经常用到的对于文件的操作,结合msdn做此文. 1.File 类 --转自msdn 常用方法: 名称 说明 AppendAllLines(S ...
- 两张图概括struts2执行流程核心(经典)
- jquery datetimepicker
1.详细说明见:https://xdsoft.net/jqplugins/datetimepicker/ 语言选择中文,现在lang配置已经失效;可用: $.datetimepicker.setLoc ...
- docker简单入门之使用docker容器部署简单的java web开源项目jpress博客程序
一.在centos7.3上安装docker 前置条件 x86_64-bit 系统 kernel 3.10+ .检查内核版本,返回的值大于3.10即可 [root@node1 ~]# uname -r ...
- SQL Server 之 子查询与嵌套查询
当由where子句指定的搜索条件指向另一张表时,就需要使用子查询或嵌套查询. 1 子查询 子查询是一个嵌套在select.insert.update或delete语句或其他子查询中的查询.任何允许使用 ...