我是 Ionic 框架的新手,我试图用全屏背景图片来启动应用程序,就像这样:
我成功地删除了教程中显示的状态栏。但是如何添加全屏图片?当我将以下内容添加到 style.css 中时,它没有反应:
html, body{
background-image: black;
}
我是 Ionic 框架的新手,我试图用全屏背景图片来启动应用程序,就像这样:
我成功地删除了教程中显示的状态栏。但是如何添加全屏图片?当我将以下内容添加到 style.css 中时,它没有反应:
html, body{
background-image: black;
}
在你的 CSS 中尝试:
.scroll-content {
background: url(image) [add image position info here];
[add any more properties here]
}
这将为整个内容区域设置背景。
在 <ion-view>
中,所有的东西都会被渲染出来... 我没有试过,但我认为您可以通过以下代码来实现背景图片:
.pane { background: url(图片地址) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; }
确保图像路径的开头有"../",这将在应用程序构建为设备后将其指向资源文件夹中的正确图像路径。仅使用面板方法似乎会引起问题,当图像在服务器上提供时出现但在我的安卓设备上没有出现时,这是我最佳的解决方案。
.scroll-content{
background: url("../media/images/background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
与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;
}
.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">
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;
}
../../
Ionic 4 更改 Ion Content 的背景颜色
在这里解释 源链接
ion-content{
--background: url(./assets/images/bg1.jpg);
--background-repeat: no-repeat;
--background-size: cover;
}
以下代码对我有效
--background: none;
background-image: url('../../../assets/imgs/splash.png') ;
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
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;
}