ionic-framework - 如何创建带有背景图像和图像上重叠文本的 ionic 卡

Question

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

<ion-content class="card-background-page">

  <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="img/card-amsterdam.png"/>
    <div class="card-title">Amsterdam</div>
    <div class="card-subtitle">64 Listings</div>
  </ion-card>

</ion-content>


page-home {

    .card-background-page {

        ion-card {
          position: relative;
          text-align: center;
        }

        .card-title {
          position: absolute;
          top: 36%;
          font-size: 2.0em;
          width: 100%;
          font-weight: bold;
          color: #fff;
        }

        .card-subtitle {
          font-size: 1.0em;
          position: absolute;
          top: 52%;
          width: 100%;
          color: #fff;
        }

      }
    }

可能是什么问题？

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>

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