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

Posted 2023-03-13

【中文标题】为应用程序设置背景图像 - Ionic 4

【英文标题】：Set background image for Application - Ionic 4

【发布时间】：2019-07-11 14:21:41

【问题描述】：

我想为 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 中设置图像背景的可能方法是什么。谢谢。

【问题讨论】：

ionic 4: changing ion-content background does not work的可能重复

【参考方案1】：

设置背景图片离子4：

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

Ref. Url

【参考方案2】：

使用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

【讨论】：

谢谢。这在按原样使用时有效。我试图用本地图像替换图像 src。它没有工作，也没有给出任何错误。

使用url(assets/imgs/appBg.png)

url(assets/imgs/appBg.png) 给出了编译错误。并使用 url(../../assets/imgs/appBg.png) 成功编译，我可以在检查时看到 ion-content 中的样式。但它没有反映在屏幕上。

【参考方案3】：

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

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

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