Question

我在我的Ionic应用程序的页面上设置了一个自定义类.auth-pane，以便使用自定义背景设置它。

背景的CSS是......

.auth-pane {
  background-image: url("../img/auth-background.jpeg");
  background-position: center;
  background-repeat: no-repeat;
}

已应用于<ion-view view-title="Auth" class="auth-pane">

在Chrome中一切正常（使用ionic serve），但是当我在设备上构建并运行时，我看到的只是纯白色背景。

我已尝试将背景图片的路径调整为 img/auth-background.jpeg和/img/auth-background.jpeg，两者都没有任何区别（尽管绝对路径在Chrome中也有效）。

没有错误（404等）与图像文件相关，因此似乎找到了文件。

Answer 1

尝试一下，它对我的离子项目非常有用：

.auth-pane {
    background: url(../img/auth-background.jpeg) no-repeat center center fixed; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
}

Answer 2

我正在使用Ionic2并获得相同的错误，但我的其他图片正在显示。 我不得不缩小图片的大小以使其正常工作。我不确定这是否属于已知限制。

Answer 3

给我一个很好的工作。

.scroll-content{
    background: url("../media/images/background.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;

}

Answer 4

它不是图像的大小阻止它在ionic2中显示。这是当你的本地图像没有显示时应该做的事情：

删除图像文件夹或图像名称之前的尾随../.App已经知道所有图像默认存储在www文件夹中。因此，您必须使用这样的格式来显示所有图像：冷杉图标：和对于背景image'

Answer 5

.auth-pane {
   background: url('../img/image_name.jpg') no-repeat top;
  background-size: 100% 200px;
}

增加适合你的身高

Answer 6

.imgOFF {
  background: url(../assets/img/light/off.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
}

.imgON {
  background: url(../assets/img/light/on.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50px;
  height: 50px;
  z-index: 2;
  border-bottom: 4px solid black;
}

<ion-item>
  <ion-toggle color="royal" checked="false" [(ngModel)]="light1"></ion-toggle>
  <ion-label>
    Light 1
  </ion-label>
  <ion-icon item-start>
    <img *ngIf="light1" class="imgON">
    <img *ngIf="!light1" class="imgOFF">
  </ion-icon>
</ion-item>

Answer 7

我遇到了同样的问题，我尝试了很多选项，包括背景大小，但最后我通过向我的容器中添加一些空内容来解决这个问题：

<span class="auth-pane">
      <span></span>
</span>

没有在设备上显示的离子背景图像

7 个答案: