离子全屏背景图片答案

【问题标题】：Ionic full screen background image离子全屏背景图片
【发布时间】：2014-07-17 09:37:07
【问题描述】：

我是 Ionic 框架的新手，我正在尝试使用这样的全屏背景图像启动应用程序：

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

html, body{
  background-image: black;
}

【问题讨论】：

标签： css ionic-framework

【解决方案1】：

在你的 css 中，尝试：

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

    [add any more properties here]

  }

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

【讨论】：

这有效，但不适用于我有 hide-nav-bar="true" 的导航栏。我实际上想完全删除它。

【解决方案2】：

在

ion-view class="pane"

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

.窗格{ 背景：url（图片）无重复中心中心固定； -webkit-background-size：封面； -moz-background-size：封面；背景尺寸：封面； }

【讨论】：

【解决方案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;

}

【讨论】：

【解决方案4】：

与 Helmut 的回答非常相似，它使用“ionic serve”工作，但当我推送到 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;
}

【讨论】：

【解决方案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">

【讨论】：

【解决方案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个目录，../../

【讨论】：

【解决方案7】：

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

这里解释Source Link

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

【讨论】：

【解决方案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;
  }

【讨论】：