template部分：

头像外部加一个 div

<div class="user-info-head"> </div>
 
css 部分

<style scoped lang="scss">
.user-info-head {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.user-info-head:hover:after {
  content: "请上传人脸照片";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 120px;
  border-radius: 50%;
  text-align: center;
}
</style>

vue 上传头像悬浮显示文字的更多相关文章

  1. 20-1 django上传文件和项目里上传头像如何查看

    一 普通上传方式 1 views def upload(request): if request.method == "POST": # print(request.POST) # ...

  2. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  3. vue 上传进度显示

    参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...

  4. python 全栈开发，Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)

    一.上传文件 上传一个图片 使用input type="file",来上传一个文件.注意:form表单必须添加属性enctype="multipart/form-data ...

  5. apiCloud上传头像

    apiCloud上传头像 1.拍照 2.从相机中选择 aui布局 <li class="aui-list-item"> <div class="aui- ...

  6. 完美实现类似QQ的自拍头像、上传头像功能！（Demo 源码）

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

  7. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

  8. [转]tftp在put上传的时候显示File not found的解决办法

    [转]tftp在put上传的时候显示File not found的解决办法 http://blog.163.com/pengcz%40126/blog/static/35908607201182433 ...

  9. 上传头像,界面无跳转,php+js

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: //route 为后端接口//upload/avatar 为上传的头像的保存地址//imgurl=/uplo ...

随机推荐

  1. Python -- 值转换为字符串的两种机制

    可以通过以下两个函数来使用这两种机制:一是通过str函数,它会把值转换为合理形式的字符串,以便用户可以理解:而repr会创建一个字符串,它以合法的Python表达式的形式来表示值.下面是一些例子: & ...

  2. xmind2020 zen 10.3.1安装破解教程

    hi大家好,xmind zen 2020 10.3.1是一款优秀的思维导图工具,我和我爸爸都在用,功能包括去掉xmind zen水印.上传图片等功能,支持windows操作系统! 文章教大家安装并解锁 ...

  3. form 表单提交的另一种方式 js

    <html> <head> <script type="text/javascript"> function formSubmit() { fm ...

  4. elementUI的el-input和el-select宽度 一致

    在用vue时,用到了element组件的 el-input 和 el-select(多选框)组件,但是宽度显示不一样,查看了多选框的css,发现element-style是写死的 添加style=&q ...

  5. thinkphp 初始化

    public function _initialize(){ //$top_img = M('adv')->where(array('adv_id'=>1057))->find(); ...

  6. 京东购物小程序 | Taro3 项目分包实践

    背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面,而很多的活动在小程序开展的同时,也会在京东 APP 端进行同步的 H5 端页面的投放.这时候,一个相同的活动,需要同时开发 ...

  7. linux下编译常见错误

    1.浮点数例外:除数为0 2.已杀死:空间过大 3.已放弃:时间过长 4.段错误:递归 / 循环出不来

  8. Sqlserver 关于varchar(max) 笔记

    看SQL server的版本,SQLserver2005以上 的nvarchar(max) 可以存放2G的内容,所以要是 SQL2005以上的nvarchar(max)足够你用的了.用nvarchar ...

  9. 探究Presto SQL引擎(1)-巧用Antlr

    一.背景 自2014年大数据首次写入政府工作报告,大数据已经发展7年.大数据的类型也从交易数据延伸到交互数据与传感数据.数据规模也到达了PB级别. 大数据的规模大到对数据的获取.存储.管理.分析超出了 ...

  10. SpringCloud升级之路2020.0.x版-15.UnderTow 订制

    本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 我们使用 Spri ...