ionic2离子卡片与背景图片

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。