Ionic4背景图像

Question

有没有办法在IONIC4上以图像作为背景？我在文档中找不到任何地方，我应用的任何CSS类都不起作用。有一个host属性总是接管背景。

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

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

在我称为<ion-content color="trans">的html文件上，问题是应用程序变得异常缓慢。有延迟的录音和背景闪烁的页面过渡。

​

​

更新：

​

经过研究，好像没有明天一样，我找到了解决这个问题的方法。在该特定页/组件的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是背景线性梯度中的不透明度。

Answer 2

离子4溶液，速记：

:host {
  ion-content {
    --background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
  }
}

Answer 3

对于离子版本4，它使用所谓的阴影DOM技术来阻止您这样做，

运行您的应用程序并检查主体或离子内容(我的意思是，您会发现一些被检查的元素包装在<shadow-root>中，这表明我的所有内部元素都是私有的，这是通过提供变量编辑它们的唯一方法，因此您的问题尝试如下：

ion-content {
  --ion-background-color: transparent !important;
}