时间戳

首页 > 解决方案 > 离子：图像未显示在背景图像上

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

问题描述

我有一个页面背景图像，并试图在它上面放置另一个图像，但是由于某种原因它没有显示

我的代码如下

.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>

我目前只看到背景图片

标签： htmlcssionic-frameworkionic3

解决方案

如果此位置正确../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 */ 
    }

推荐阅读