个人资料照片上的按钮

Question

如何使用 html 和 css 在个人资料照片（如 facebook 应用程序）上添加按钮？我在 Ionic 3 中使用 ion-avatar

这是我的代码：

  <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;和等属性right: 0;来指定相对于父容器的绝对偏移量。

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

我使用了您提供的 CSS，但不清楚您将该类到底应用于什么。请根据需要随意调整！

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

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