Ionic4背景图像

Question

嘿家伙,我知道这听起来真的很愚蠢,但有没有办法在IONIC4上有一个图像作为背景？我在文档中找不到任何地方,我申请的任何CSS类都不起作用.有一个host属性总是占据背景.

我尝试通过在theme/variables.scss上创建一个名为"trans"的属性来将离子内容设置为透明背景

.ion-color-trans {
  --ion-color-base: transparent;
}

在html文件上我称<ion-content color="trans">这个问题是应用程序变得非常慢.录制时间有延迟,页面转换时背景闪烁.

---

更新:

经过研究,没有明天,我找到了解决问题的方法.在该特定页面/组件的SCSS文件中,添加以下行:

:host {
    ion-content {
      --background: url('../../assets/images/main-bg@2x.png');
    }
  }

Answer 1

离子4解决方案：

请将以下 CSS 应用到您的 .scss 页面以获得完美的背景页面：

.page-background-image {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(./../assets/images/mybg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 50vh;
  }

其中 0.5 是背景线性渐变的不透明度。