如何设置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

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

试试这个：

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

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

Answer 2

出于某种原因，我是这样解决的：

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

在我的页面 scss 中我写了：

ion-content{

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

之后后台设置成功

Answer 3

试试这个：

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

//Or 

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

Answer 4

仅在一页上更改背景：

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

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

Answer 5

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

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

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

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

例如，如果离子含量参考

--ion-background-color: #ffffff

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

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

Answer 6

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

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

希望对你有帮助:)

Answer 7

试试这个。

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

让我知道它是否适合你

Answer 8

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

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

Answer 9

截至 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 10

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

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

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>

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

要添加额外的颜色，请勾选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;
}

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

如何设置IONIC 4的背景颜色

How to set background color IONIC 4

ionic-framework

angular

ionic4