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

如果此位置正确 ../ assets / imgs / Splash Screen Image.png ，然后删除文件名 Splash_Screen_Image.png 中的空格或检查您的位置图像是否可用不是？并在使用相对位置和绝对位置时删除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 */ 
    }

离子：图像未显示在背景图像上

1 个答案: