html - ionic2 - 带背景图像的 ionic 卡

Question

我正在尝试了解如何 this ion-card background image作品。他们有自己的 html像这样:

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

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

然后只需设置 sass :

.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;
  }

}

没有z-index ，<img src="img/card-saopaolo.png"/> 怎么能神奇地变成了背景？它是由 sass 处理的吗？ ？还是我以前从未学过的其他东西？

Answer 1

card-title 和card-subtitle 只是简单地用position: absolute 放在图像的顶部，不需要z-index.