CSS 离子全屏背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23906945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic full screen background image
提问by Sinan Samet
I am new to the Ionic framework and I am trying to start the app with a full screen background image like this:
我是 Ionic 框架的新手，我正在尝试使用如下所示的全屏背景图像启动应用程序：
I did manage to remove the statusbar it was shown in the tutorial. But how do I add a full screen image? When I added this to the style.css it didn't react:
我确实设法删除了教程中显示的状态栏。但是如何添加全屏图像？当我将它添加到 style.css 时，它没有反应：
html, body{
background-image: black;
}
回答by Mr MT
In your css, try:
在你的 css 中，尝试：
.scroll-content {
background: url(image) [add image position info here];
[add any more properties here]
}
This will set the background for the full content area.
这将为整个内容区域设置背景。
回答by Helmut
in
在
ion-view class="pane"
all the stuff is rendered ... i did not try it out but i think you can manage this with
所有的东西都被渲染了......我没有尝试过，但我认为你可以用
.pane {
background: url(image) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
回答by Aidan Doherty
Make sure the start of your image path has "../" this will point it to the correct image path in your resource folder once the app is built for a device. Using the pane method only seemed to cause problems this was the best solution for me when the image was appearing when served but not on my android device.
确保您的图像路径的开头有“../”，一旦为设备构建了应用程序，这将指向资源文件夹中正确的图像路径。使用窗格方法似乎只会引起问题，这对我来说是最好的解决方案，当图像在服务时出现但不在我的 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;
}
回答by JDawgg
Very similar to answer from Helmut, which worked using 'ionic serve' but gave me a white background when I pushed to Android (4.2.2 on a Nexus 7 in my case).
与 Helmut 的回答非常相似，它使用“离子服务”工作，但是当我推送到 Android 时给了我一个白色背景（在我的例子中是 Nexus 7 上的 4.2.2）。
The pane class selector is correct if you wish to make the background fullscreen, however android just seemed to make the background white if I set the "background" value at all. Using "background-image" put things right.
如果您希望将背景设为全屏，则窗格类选择器是正确的，但是如果我设置了“背景”值，android 似乎只是将背景设为白色。使用“背景图像”把事情做好。
I found the following worked on Android, and in Chrome (while web testing).
我发现以下内容适用于 Android 和 Chrome（网络测试时）。
.pane {
background-image: url(image);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
回答by Ryan Loggerythm
Since the folder structures have changed recently in Ionic 2 beta...
由于最近在 Ionic 2 beta 中文件夹结构发生了变化......
Your image should be at a path similar to www/img/backgrounds/lake.png, and the accompanying CSS should read:
您的图像应该位于类似于 的路径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;
}
Note: you need to jump up 2 directories, ../../
注意：需要跳转2个目录， ../../
回答by Code Spy
Ionic 4 Change Background color of Ion Content
Ionic 4 更改离子内容的背景颜色
Explained here Source Link
在这里解释源链接
ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;
}
回答by Armaan
In Ioinc-5: Create a in class home-page.scss.
在 Ioinc-5 中：创建一个 in class home-page.scss。
.class-name {
--background: url("/assets/icon/background.jpg") 0 0/100% 100% no-repeat
}
Open home-page.html and add class in ion-content.
打开 home-page.html 并在 ion-content 中添加类。
<ion-content class="class-name">
