Question

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

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

在我的屁股上，我有：

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

背景颜色从不改变。如果我添加--ion-background-color：＃111D12;在variables.scss中，成功地为每一页更改了背景，但是我只更改了一页的颜色。我该如何实现？

Answer 1

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

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

在我的Page scss中，我写道：

ion-content{

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

之后成功设置背景。

Answer 2

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

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

从离子4开始，Ionic组件实现了shadowDOM的概念，而在实现shadowDOM的组件中查找css选择器的旧方法不再起作用

如此，仅当您更改组件引用的变量时，才能进行任何修改

例如，如果离子含量参考

--ion-background-color: #ffffff

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

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

Answer 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);
}

面对问题：：使用以上代码还将“列表项”，“离子卡”等的背景颜色更改为原色。因此，这使它们看起来很难看！

示例2：

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

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

示例3：

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

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

Answer 4

您可以这样使用...在我的页面上效果很好。

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

希望对您有所帮助：）

Answer 5

也可以在android deploy中工作， 如果您需要背景透明。您必须以这种方式进行设置，我尝试了另一种方式，但不起作用，只有这种方式对我有用。

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

Answer 6

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

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

Answer 7

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

尝试一下：

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

如果仍然无法使用，请检查离子含量元素并尝试找到CSS，以及哪个属性或其他选择器覆盖它

Answer 8

尝试一下：

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

//Or 

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

Answer 9

仅在一页上更改背景：

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

请不要忘记！important，否则它可能无法正常工作。

Answer 10

尝试一下。

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

让我知道它是否对您有用

Answer 11

您还可以使用其他方法。无需直接处理ion-content背景，只需包装ion-content内部的内容并将背景应用于包装器本身即可。示例：

Component.html

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

Component.scss

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

Answer 12

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

您也可以使用 “主要”，“次要”，“第三”，“成功”，“警告”，“危险”，“亮”，“中等”和“黑暗”。

要添加其他颜色，请选中https://ionicframework.com/docs/theming/colors

Answer 13

我在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

如何设置背景色IONIC 4

13 个答案: