Question

我正在尝试使用Ionic Docs https://ionicframework.com/docs/components/#card-background中的背景图像卡示例，但是在实现过程中，文本不会与背景图像重叠。

content

可能是什么问题？

Answer 1

您的代码似乎没有问题，但是请尝试从此更改代码

<ion-card div class="card">
    <img src="assets/img/rundmc-live.png"/>
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
</ion-card>

对此

<ion-card>
    <img src="assets/img/rundmc-live.png"/>
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
</ion-card>

还要检查您的图像路径是否正确指定。

Answer 2

<ion-card>
    <ion-card-header>
      <img src="https://www.simplilearn.com/ice9/free_resources_article_thumb/Project-Scope-Management-Cover.jpg"/>
      <ion-card-subtitle>Date :  {{note.date | date: 'dd-MMM-yyyy'}}</ion-card-subtitle>
      <ion-card-title>{{note.title}}</ion-card-title>
    </ion-card-header>
  
    <ion-card-content>
      {{note.content}}
    </ion-card-content>
  </ion-card>

如何使用背景图像和图像上的重叠文本创建离子卡

2 个答案: