如何设置背景颜色IONIC 4答案

【问题标题】：How to set background color IONIC 4如何设置背景颜色IONIC 4
【发布时间】：2019-05-01 02:11:25
【问题描述】：

我在尝试仅在一个 IONIC 4 (--type=angular) 页面中更改背景颜色时遇到问题。我正在尝试为离子含量添加一个类。在我的 html 文件中，我有：

<ion-content class="fondologin">
...
</ion-content>

在我的 sass 中，我有：

.fondologin{
    background-color: #111D12!important;
}

背景颜色永远不会改变。如果我添加 --ion-background-color:#111D12;在 variables.scss 中，每个页面的背景都已成功更改，但我只更改了一页中的颜色。我怎样才能做到这一点？

【问题讨论】：

你可以尝试使用 [ngClass] 或 [class] 属性并尝试吗？
你在应用内使用这个 scss 文件吗？
你试过这个ion-content{ --ion-background: #111D12 !important}
我在 app scss 或我的组件 sass 中尝试它没有成功

标签： angular ionic-framework ionic4

【解决方案1】：

出于某种原因，我以这种方式解决了它：

首先我在主题文件夹内的variables.scss 文件中添加了--ion-background-color:#ffffff;。

在我的页面 scss 中我写道：

ion-content{

    --ion-background-color:#111D12;
}

之后背景设置成功。

【讨论】：

你不需要再添加到 variables.scss 中了。

【解决方案2】：

我将重新发布评论最多的答案，并附上额外的解释

ion-content{
    --ion-background-color:#111D12;
}

从ionic 4开始，Ionic组件实现了shadowDOM的概念，在实现shadowDOM的组件中查找css选择器的老方法不再奏效

因此，只有更改组件引用的变量才能进行任何修改

例如，如果离子含量参考

--ion-background-color: #ffffff

您可以修改背景颜色的唯一方法是在您的 css 文件中执行此操作

ion-content{
    --ion-background-color:#111D12;
}

【讨论】：

更多信息可以参考这个youtube视频youtube.com/watch?v=_D1lCoYzivA

【解决方案3】：

截至 2020 年 3 月，使用 Ionic 5，以下似乎是唯一可行的解决方案，而不会干扰其他元素的背景颜色。将以下代码放入 variables.scss 文件中：

工作解决方案：

ion-content {
  --background: var(--ion-color-primary); // Replace this with color of your choice
}

以下解决方案在 Ionic 5 中似乎无法正常工作。

示例 1：

ion-content {
  --ion-background-color: var(--ion-color-primary);
}

ISSUE FACED：使用上面的代码还将列表项、离子卡等的背景颜色更改为原色。所以这让他们看起来很丑！

示例 2：

ion-content {
  background-color: var(--ion-color-primary);
}

面临的问题：使用上述方法根本不会应用背景颜色！

示例 3：

ion-content {
  background: var(--ion-color-primary) !important;
}

面临的问题：使用上述方法根本不会应用背景颜色！

【讨论】：

感谢帮助?

【解决方案4】：

您可以像这样使用...在我的页面上运行良好。

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

希望对你有帮助:)

【讨论】：

【解决方案5】：

也适用于 android deploy， 如果您需要背景透明。你必须这样设置，我尝试了另一种方法但不起作用，只有这种方式对我有用。

ion-content {
  --background: rgba(0, 255, 0, 0.5);
}

【讨论】：

【解决方案6】：

在我的 Variables.scss 文件中，我编写了这段代码，然后将其应用于每个文件。

 ion-content{
    --background:#f9f9f9;
 }

【讨论】：

【解决方案7】：

试试这个。

ion-content{
background-color:  #000000(use your color here) !important;
}

让我知道它是否适合你

【讨论】：

【解决方案8】：

可能是你的 CSS 选择器不够准确。

试试这个：

ion-content.fondologin{
    background-color: #111D12!important;
}

如果仍然无法正常工作，请检查您的 ion-content 元素并尝试查找您的 CSS，以及哪个属性或其他选择器覆盖了它

【讨论】：

【解决方案9】：

试试这个：

    :host {
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }

//Or 

 page-name{
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }

【讨论】：

建议为您发布的答案添加一些描述

【解决方案10】：

只改变一页的背景：

ion-content{
--ion-background-color:  #00ABE1 !important;
}

不要忘记 !important，否则它可能不起作用。

【讨论】：

【解决方案11】：

您也可以使用不同的方法。而不是直接处理ion-content 背景，只需包装ion-content 内部的内容并将背景应用于包装器本身。示例：

组件.html

<ion-content>
<section class="wrapper">
 ...
 </section>
</ion-content>

组件.scss

ion-content .wrapper {
min-height: 100%;
background: #EBEBEB;
padding-buttom: 10px;
}

【讨论】：

【解决方案12】：

我在 Ionic 5 上遇到了同样的问题

我根据其他答案使用此解决方案

在模板中：

<ion-content class="wrapper">
...
</ion-content>

在 global.scss 中：

:root {
    --ion-bg-color: #f5f6fa;
}

ion-content.wrapper {
    --background: var(--ion-bg-color) !important;
}

或更简单：

ion-content {
    --background: #f5f6fa !important;
}

我也使用这个帖子： https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

【讨论】：

【解决方案13】：

<IonContent color="primary" >   </IonContent>

你也可以使用 “primary”、“secondary”、“tertiary”、“success”、“warning”、“danger”、“light”、“medium”和“dark”。

要添加更多颜色，请查看https://ionicframework.com/docs/theming/colors

【讨论】：