离子全屏背景图像

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

in

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的回答，但是当我推送到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中： 创建一个类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">

Answer 6

由于最近在Ionic 2 beta中文件夹结构发生了变化......

您的图片应位于与www/img/backgrounds/lake.png类似的路径上，随附的CSS应为：

.myClassName {
    background: url(../../img/backgrounds/lake.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

注意：您需要跳过2个目录../../

Answer 7

Ionic 4更改离子含量的背景颜色

在这里Source Link

解释

ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;  
}

Answer 8

试试下面的代码，在不同的设备上用全背景更改你的图片网址。

  ion-content {
    --background: none;
    background-image: url('https://cdn.wallpapersafari.com/19/81/zOUft6.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }