在个人资料照片上点击按钮

Question

如何使用html和css在个人资料照片（例如facebook应用）上添加按钮？我在离子3

中使用了离子头像

这是我的代码：

  <ion-item no-lines>
    <ion-avatar>
      <img src="http://www.sclance.com/pngs/png-avatar/png_avatar_1048927.png">
    </ion-avatar>
  </ion-item>

css：

ion-avatar img  {
    width:100% !important;
    height : 100% !important;
    max-width: 150px !important;  //any size
    max-height: 150px !important; //any size
    margin: auto;
    }

Answer 1

这里的关键是相对和绝对定位。

如果您为父容器提供与配置文件图片等效的CSS属性position: relative;，而头像则为属性position: absolute;，则可以使用诸如bottom: 0;和{{1 }}，以指定与父容器的绝对偏移量。

下面是此CSS的一个非常基本的实现，在此jsfiddle中有更多详细信息：https://jsfiddle.net/na8956qd/1/

我使用了您提供的CSS，但尚不清楚您到底要对该类应用什么。随时根据需要进行调整！

right: 0;

Answer 2

尝试点击上传图标

CLICK HERE

.rounded-box {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto;
}

.outer {
  width: 100% !important;
  height: 100% !important;
  max-width: 150px !important; /* any size */
  max-height: 150px !important; /* any size */
  margin: auto;
  background-color: #6eafd4;
  border-radius: 100%;
  position: relative;
  }

.inner {
  background-color: #ff1414;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.inner:hover {
  background-color: #5555ff;
}
.inputfile {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
}
.inputfile + label {
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    width: 50px;
    height: 50px;
    pointer-events: none;
    cursor: pointer;
    line-height: 50px;
    text-align: center;
}
.inputfile + label svg {
    fill: #fff;
}

<div class="rounded-box">
  <div class="outer">
    <div class="inner">
    <input class="inputfile" type="file" name="pic" accept="image/*">
    <label><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path></svg></label>
    </div>
  </div>
</div>