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.