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。