vue 上传头像悬浮显示文字

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>