如何在IONIC 4中设置背景颜色。

Question

我在尝试修改只有一个 IONIC 4 (--type=angular) 页面的背景颜色时遇到了问题。 我试图为 ion-content 添加一个类。 在我的 html 文件中，我有：

我在尝试更改仅限于一个 IONIC 4(--type=angular) 页面的背景颜色时遇到了问题。 我正在尝试为 ion-content 添加一个类。在我的 HTML 文件中，我已经有了以下内容：

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

在我的Sass中，我有：

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

背景颜色不会改变。如果我在variables.scss中添加--ion-background-color:#111D12;，则每个页面的背景都成功更改，但我只想更改一个页面的颜色。我该如何实现？

- Kevin Sanchez

---

你可以尝试使用[ngClass]或[class]属性来试试吗？ - Hrishikesh Kale

你是在应用程序的 SCSS 文件中使用这个吗？ - Sachila Ranawaka

你尝试过这个吗？ion-content{ --ion-background: #111D12 !important} - Mohan Gopi

我正在尝试在应用程序的 SCSS 中或在我的组件 SASS 中实现它，但没有成功。 - Kevin Sanchez

Answer 1

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

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

然后在我的页面 scss 中编写了以下内容：

ion-content{

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

设置背景成功后。

- Kevin Sanchez

---

不需要再将其添加到variables.scss文件中。 - Waleed Asender

抱歉，作为新手，我该如何在特定页面上实现它？如果这样做，它将影响到所有页面。 - Carljul

Answer 2

我打算转发最受评论的答案，并附带额外的解释。

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

从ionic 4开始，Ionic组件实现了shadowDOM的概念，并且在实现shadowDOM的组件中查找CSS选择器的旧方法不再适用。

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

例如，如果ion content引用了

--ion-background-color: #ffffff

您唯一可以修改背景颜色的方式是在CSS文件中进行修改。

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

- Edward Choh

---

更多信息，请参考此YouTube视频https://www.youtube.com/watch?v=_D1lCoYzivA - Edward Choh

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

面临问题：使用上述代码还会将列表项、Ionic卡片等的背景颜色更改为主要颜色，这使它们看起来很难看！

例子2：

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

问题：使用上述方法并未应用背景颜色！

示例 3：

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

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

- Devner

Answer 4

你可以像这样使用...在我的页面上工作得很好。

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

我希望这能帮助到你 :)

- user9088454

Answer 5

在我的Variables.scss文件中，我编写了以下代码，然后它会在每个文件中应用。

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

- Ghayyas Mubashir

Answer 6

在 Android 部署中也适用， 如果您需要背景透明度， 您必须按照以下方式设置。我尝试了另一种方法，但不起作用， 只有这种方法对我有效。

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

- Miguel Carrillo

Answer 7

尝试这个。

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

"最初的回答" - 请告诉我它是否对您有效。

- Nayan Dubey

Answer 8

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

- Ben Baker

Answer 9

对我来说，重写.sc-ion-card-ios-h以设置我的卡片颜色。

.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;
    }
}

- Fractal Mind

Answer 10

你也可以采用不同的方法。 与其直接处理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;
}

- guzmanoj