6

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

我尝试通过在 theme/variables.scss 上创建一个名为“trans”的属性来将 ion-content 设置为透明背景

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

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





更新：

在研究了没有明天之后，我找到了解决这个问题的方法。在该特定页面/组件的 SCSS 文件中，添加以下行：

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

4 回答 4

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 是背景线性梯度中的不透明度。

于 2019-03-07T19:40:27.760 回答
1

将其放入您的组件或页面 scss 中。

 ion-content{ 
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;
     }
于 2019-07-21T09:03:30.210 回答
1

Ionic 4 解决方案，简写：

:host {
  ion-content {
    --background: url('../../../assets/imgs/splash.png') no-repeat center center / cover;
  }
}
于 2019-03-08T01:05:09.633 回答
1

对于 ionic 版本 4，它使用所谓的 Shadow DOM 技术来阻止您这样做，

运行您的应用程序并检查 body 或 ion-content 我的意思是，您会发现一些已检查的元素包含在<shadow-root>其中，这表明我的所有内部元素都是私有的，通过提供的变量编辑它们的唯一方法，因此对于您的问题，请尝试以下操作： 

ion-content {
  --ion-background-color: transparent !important;
}
于 2019-04-06T06:47:56.293 回答