如何设置背景颜色IONIC 4

Question

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

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

在我的sass中我有:

.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

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

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