离子全屏背景图片

Question

我是 Ionic 框架的新手，我试图用全屏背景图片来启动应用程序，就像这样：

我成功地删除了教程中显示的状态栏。但是如何添加全屏图片？当我将以下内容添加到 style.css 中时，它没有反应：

html, body{
  background-image: black;
}

- Sinan Samet

Answer 1

在你的 CSS 中尝试：

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

    [add any more properties here]

  }

这将为整个内容区域设置背景。

- Mr MT

---

这个可以工作，但对于我在其中使用了hide-nav-bar="true"的导航栏不起作用。实际上，我想要完全删除它。 - Sinan Samet

Answer 2

在 <ion-view> 中，所有的东西都会被渲染出来... 我没有试过，但我认为您可以通过以下代码来实现背景图片：

    .pane {
        background: url(图片地址) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }

- Helmut

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;

}

- Aidan Doherty

Answer 4

与Helmut的答案非常相似，使用“ionic serve”可以工作，但是当我将应用推送到Android（在我的情况下是Nexus 7上的Android 4.2.2）时，会出现白色背景。

如果您希望使背景全屏，则窗格类选择器是正确的，但是如果我设置“背景”值，Android似乎只会使背景变白。使用“background-image”可以解决这个问题。

我发现以下内容在Android上和Chrome中（在Web测试时）都有效。

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

- JDawgg

Answer 5

在Ionic-5中： 创建一个名为home-page.scss的类。

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

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

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

- Armaan

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;
}

注意：您需要跳转到上两级目录，../../

- Ryan Loggerythm

Answer 7

Ionic 4 更改 Ion Content 的背景颜色

在这里解释 源链接

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

- Code Spy

Answer 8

以下代码对我有效

--background: none;
  background-image: url('../../../assets/imgs/splash.png') ;
  background-position: center top;
  background-repeat: no-repeat;
 background-size: cover;

- Emmanuel Iyen-Mediatrees

Answer 9

尝试以下代码，使用不同设备的完整背景来更改您的图像网址。

  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;
  }

- Bal mukund kumar