Question

我需要创建ion-card，如下所示。我尝试了很多方法。但还没有运气。任何线索？

注意：它有2张图片。顶一和小书封面。

的示例

这就是我需要的：

html的

<ion-card class="card-margin">
    <img class="contentPicture" [src]="data?.image" />

    <ion-card-content>
        <ion-item class="book-cover">
            <ion-thumbnail item-left class="thumbnail">
                <img [src]="data?.image2">
            </ion-thumbnail>
        </ion-item>
        <ion-item class="book-details">
            <h2>From book:
                <span>My book</span>
            </h2>
            <h2>Publisher:
                <span>My publisher</span>
            </h2>
        </ion-item>
    </ion-card-content>
</ion-card>

Answer 1

我的尝试可以找到here。

在.book-cover类中设置样式：

.book-cover{
  top: -50px;
  z-index: 2;
  background: transparent;
}

注意：您可能需要编辑图像的alpha以删除图像中的空白（如果有的话）。

对于名称部分，我建议使用ion-row和ion-col代替ion-item，因为后者会占用整行。

<ion-card-content>
    <ion-grid>
      <ion-row>
            <ion-col col-2 class="book-cover">
                <ion-thumbnail item-left class="thumbnail">
                    <img [src]="data?.image2">
                </ion-thumbnail>
            </ion-col>
            <ion-col class="book-details">
                <h2>From book:
                    <span>My book</span>
                </h2>
                <h2>Publisher:
                    <span>My publisher</span>
                </h2>
            </ion-col>
      </ion-row>
    <ion-grid>
    </ion-card-content>

Answer 2

使用position: relative到主图像，position: absolute到图书图像，我做了示例代码

.bg-image {
  position: relative;
  
}
.book {
  position: absolute;
  top: 250px;
}
.text {
  position: absolute;
  left: 180px;
  
}

<div class="bg-image">
<img src="https://i.imgur.com/U4Oadyu.png">
</div>
<div class="book">
<img src="https://i.imgur.com/r7uK5St.jpg">
</div>
<div class="text">
<p>Text Here</p>
</div>

重叠顶部图像CSS

2 个答案: