为应用程序设置背景图像 - Ionic 4

Question

我想为 Ionic 4 应用程序设置背景图片（所有页面）。这在使用 Ionic 3 时非常简单，但同样的方法在这里不起作用。我阅读了 Ionic 4 的 theming，但我找不到将图像设置为背景的方法。

如文档中所述，可以设置背景颜色并且有效。

:root {
    --ion-background-color: linear-gradient(197deg, rgba(100,100,100,1) 0%, rgba(63,63,63,1) 13.5%, rgba(29,29,29,1) 33.33%, rgba(0,0,0,1) 100%) !important;
}

但是设置图片为背景时，没有反应，

:root {
    --background: url('assets/imgs/appBg.png') no-repeat fixed center; 
}

想知道在 Ionic 4 中设置图像背景的可能方法是什么。谢谢。

Answer 1

使用 ion-content 代替 :root。

作为：

ion-content{
  --background: url(https://i.stack.imgur.com/mSXoO.png)!important;
  --background-repeat: no-repeat;
  --background-size:100% 100%;
}

See working code

Answer 2

要设置应用程序的背景，需要在托管环境中提供图像的路径应用程序。

ion-content{
    --background: url(http://10.100.176.52:8100/appBg.png) !important;
    --background-repeat: no-repeat;
  }

这会将图像设置为整个应用程序的背景。

Answer 3

设置背景图片 ionic 4:

ion-content {
  --background: url(../../assets/bg.jpg) no-repeat center/cover fixed;
}

Ref. Url

为应用程序设置背景图像 - Ionic 4

Set background image for Application - Ionic 4

css

ionic-framework

ionic4