效果图:

代码实现:

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. CF1100F Ivan and Burgers

    题目地址:CF1100F Ivan and Burgers 一道有难度的线性基题,看了题解才会做 预处理两个数组: \(p_{r,i}\) 表示满足下列条件的最大的 \(l\) :线性基第 \(i\) ...

  2. 【VMware vSphere】Veeam备份

    前言 刚刚整理自己的Onenote笔记,发现有一篇笔记没有整理到博客上面来.因为没有许可证书,所以最后也没有成功,但是还是写在这里吧,万一哪儿天有了许可证书就又可以做试验了~ Veeam Backup ...

  3. 设计模式C++学习笔记之七(AbstractFactory抽象工厂模式)

      抽象工厂,提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类.对于工厂方法来说,抽象工厂可实现一系列产品的生产,抽象工厂更注重产品的组合. 看代码: 7.1.解释 main(),女 ...

  4. linux系统弱密码检测

    需要自备弱密码明文字典 from _utils.patrol2 import data_format,report_format,run_cmd import platform import cryp ...

  5. planning深度剖析

    planning深度剖析 结合find命令过滤目录及文件名后缀: find /home/hadoop/nisj/automationDemand/ -type f -name '*.py'|xargs ...

  6. C++代码风格指南总结

    C++代码风格指南 代码风格的重要性 今天我收到thougthwork笔试没过的消息, 心里确实很难受, 然后师兄说我代码写得很糟糕 细想一下, 我写代码确实是随心所欲, 并没有遵循什么规范; 所以现 ...

  7. ebs 12.1.1 单节点多用户安装

    本次测试环境:操作系统 oracle linux 6.9   oracle ebs 12.1.1   192.168.20.210  erpapp1.hthorizon.com erpapp1 yum ...

  8. Linux 文档与目录结构

    Linux之文档与目录结构   Linux文件系统结构 Linux目录结构的组织形式和Windows有很大的不同.首先Linux没有“盘(C盘.D盘.E盘)”的概念.已经建立文件系统的硬盘分区被挂载到 ...

  9. 移动端触屏滑动touches使用

    代码 var start = { x: 0, y: 0 } var end = { x: 0, y: 0 } document.addEventListener('touchstart', funct ...

  10. su命令

    作用: 切换 用户 选项: -:可以更改当前目录为切换用户的家目录 使用: # 切换用户,当前所在用户目录不变 su 用户名 # 切换用户,当前所在目录改为切换对象的家目录 /home/用户名 su ...