如何在离子中将图像叠加在另一个图像之上

Posted 2023-03-16

【中文标题】如何在离子中将图像叠加在另一个图像之上

【英文标题】：How can I overlap an img on top of another one in ionic

【发布时间】：2022-01-11 01:12:25

【问题描述】：

我想创建类似的东西：

在我的设计中，但我不确定在 ionic 中使用什么 CSS。这就是我的代码示例的样子

<ion-item class="main-container" lines="none">
    <ion-img class="cover-img"
      src="../../assets/images/logo.png"
    ></ion-img>
  </ion-item>

  <ion-item class="main-container" lines="none" style="margin:0;">
      <ion-avatar>
        <img src="../../assets/images/avatar.png" />
      </ion-avatar>
    <ion-label>Item Avatar</ion-label>
  </ion-item>

谁能帮我处理 CSS 部分？

【参考方案1】：

您可以使用margin-top: -50px 来实现。

您也可以将其设为position: absolute 元素并使用top: -50px 或top: -50%。

红色的例子是position: absolute，黑色的例子是margin：

<div style="display: flex">
  <div style="width: 45%; height: 100px; margin-top: 50px; margin-right: 5%; border: 1px solid black">
    <div style="width: 50px; height: 50px; margin: -25px 0 0 25px; border: 1px solid black"></div>
  </div>

  <div style="position: relative; width: 45%; height: 100px; margin-top: 50px; border: 1px solid red">
    <div style="position: absolute; width: 50px; height: 50px; top: -50%; right: 50%; transform: translate(50%, 50%); border: 1px solid red"></div>
  </div>
</div>

【讨论】：

第一个选项有效（只显示了一半），但它在封面 img 后面，第二个选项无效。

第二个作品，如果你把位置相对于底部容器。如果您为其设置z-index，第一个就可以了。喜欢z-index: 5。横幅必须具有较低的z-index。 @crystalWitchEla

见w3schools.com/css/css_positioning.asp了解更多关于position: absolute的信息。

我添加了一个 sn-p 以便更好地解释。 @crystalWitchEla