Ionic4 背景图像

Posted 2023-03-06

【中文标题】Ionic4 背景图像

【英文标题】：Ionic4 Background Image

【发布时间】：2019-05-09 10:37:33

【问题描述】：

有没有办法在 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/[e-mail]');
    
  

【问题讨论】：

创建一个类.bg-transparent background-color: transparent !important，并附加到它

嘿@Yoarthur 感谢您的提示，这并没有成功：/

可以使用主题中的 --background 变量。它应该可以解决问题。

您可以回答自己的问题，而不是发布更新

@VarunSukheja 仍然没有答案。更新只是为了以防我或其他人在有最终解决方案时遇到临时解决方案。

【参考方案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 是背景线性渐变中的不透明度。

【参考方案2】：

Ionic 4 解决方案，简写：

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

【参考方案3】：

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

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

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

【参考方案4】：

把它放到你的组件或页面scss中。

 ion-content 
    --background: #fff url('../../assets/images/cover.jpg') no-repeat center center / cover;