如何创建具有背景图像和图像上重叠文本的离子卡答案

【问题标题】：How to create a card an ionic card with background image and overlapping text on the image如何创建具有背景图像和图像上重叠文本的离子卡
【发布时间】：2019-05-21 16:37:11
【问题描述】：

我正在尝试使用 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;
        }

      }
    }

可能是什么问题？

【问题讨论】：

你在哪里尝试这个？我可以看到您的样式没有被应用。

标签： ionic-framework ionic3

【解决方案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>

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

【讨论】：

嘿，我尝试进行更改，但它似乎将图像与卡片分开。
令人惊讶的是我复制了你的代码粘贴并运行它，它实际上工作正常。
@vVryan.Higz 那是因为您来自.scss 文件的样式没有加载。
@vVryan.Higz 检查您是否在选择器中插入了正确的名称，这可能是您的 .scss 文件无法正常工作的问题。

【解决方案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>

【讨论】：