离子全屏背景图像

Question

我是Ionic框架的新手,我正试图用这样的全屏背景图像启动应用程序:

我确实设法删除了教程中显示的状态栏.但是如何添加全屏图像？当我将它添加到style.css时,它没有做出反应:

html, body{
  background-image: black;
}

Answer 1

在你的CSS中,尝试:

  .scroll-content {
    background: url(image) [add image position info here];

    [add any more properties here]

  }

这将设置完整内容区域的背景.

Answer 2

在

ion-view class="pane"

所有的东西都被渲染...我没有尝试,但我认为你可以用它来管理

    .pane {
        background: url(image) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }

Answer 3

确保图像路径的起点为"../",一旦为设备构建应用程序,这将指向资源文件夹中的正确图像路径.使用窗格方法似乎只会导致问题这对我来说是最好的解决方案,当图像出现时,但不是在我的Android设备上.

.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

非常类似于Helmut的答案,Helmut使用'离子服务',但是当我推送到Android时,我给了我白色背景(在我的情况下,在Nexus 7上为4.2.2).

如果你想让背景全屏,那么窗格类选择器是正确的,但是如果我设置了"背景"值,那么android似乎只会使背景变白.使用"背景图像"把事情做对了.

我发现以下内容适用于Android和Chrome(同时进行网络测试).

.pane {
    background-image: url(image); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Answer 5

在 Ioinc-5 中：创建一个 in class home-page.scss。

.class-name {
  --background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
 }

打开 home-page.html 并在 ion-content 中添加类。

<ion-content class="class-name">