Ionic: изображение не отображается поверх фонового изображения

Question

У меня есть фоновое изображение страницы, и я пытаюсь разместить поверх него другое изображение, однако по какой-то причине оно не отображается

Мой код выглядит следующим образом

.page-background {
    background-image: url('../assets/imgs/Splash Screen Image.png');
    background-size: cover;
    position: relative;
    z-index: 1;
}
.page-top-img {
    position:absolute;
    left:50px;
    top: 50px;
    z-index: 2;
}

<ion-content padding class="page-background">
    <img src="assets/imgs/MasterCard.svg" alt="" class="page-top-img" />
</ion-content>

   

В настоящее время я вижу только фоновое изображение

Answer 1

, если это местоположение правильное?и удалите z-index, когда вы используете положение относительное и абсолютное.

<ion-content padding class="page-background">
      <img src="assets/imgs/MasterCard.svg" alt="" class="page-top-img" />
    </ion-content>

    .page-background{
      background-image: url('../assets/imgs/Splash_Screen_Image.png');
      background-size: cover;
      position : relative;
    }
    .page-top-img{
      position:absolute;
      left:50px;
      top: 50px;
      width:100%; /* set your width size */
      height:100px; /* set your height size */ 
    }