如何设置背景颜色IONIC 4

Question

我在尝试仅在一个 IONIC 4 (--type=angular) 页面中更改背景颜色时遇到问题。 我正在尝试为离子含量添加 class。 在我的 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文件中。

在我的页面 scss 中，我写道：

ion-content{

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

之后背景设置成功。

Answer 2

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

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

从ionic 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 部署，如果您需要背景透明度。 你必须像这样设置，我尝试了另一种方法但不起作用，只有这种方法对我有用。

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

Answer 6

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

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

Answer 7

尝试这个。

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

让我知道它是否适合你

Answer 8

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

尝试这个 ：

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

如果它仍然不起作用，请检查您的 ion-content 元素并尝试找到您的 CSS，以及哪个属性或其他选择器正在覆盖它

Answer 9

试试这个：

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

//Or 

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

Answer 10

仅在一页上更改背景：

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

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

Answer 11

您也可以使用不同的方法。 而不是直接处理ion-content背景，只需包装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;
}

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

Answer 14

对我来说，它是覆盖.sc-ion-card-ios-h来设置我的卡 colors

.sc-ion-card-ios-h {
    border-radius: 13px;    
    background-image: url("/assets/img/bg-panel.png");
    background-size: cover;
    border: outset 2px hsl(195deg 46% 40%);
    @media (max-width: 768px) {
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
}