Question

我以不同的方式尝试使用链接（How to set background color IONIC 4）作为标题背景色，并按照ionic 2和ionic 3进行了尝试：

我可以为离子含量设置背景颜色，但是标题没有背景颜色。

代码：

<ion-header>
    <ion-toolbar style="background-color: red">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

请需要您的支持。

Answer 1

看来离子头更像是内部离子成分的容器（如离子工具栏）。我查看了Ionic v4 ion-toolbar documentation。该组件具有许多可定制的自定义css定制属性，包括--background。这可能就是您要寻找的。

假设您使用CLI创建了“登录”页面组件，则可以向 login.scss 文件中添加新的CSS类定义：

.new-background-color{
    --background: #54d61c;
}

然后在您的 login.page.html 文件中进行引用：

<ion-header>
  <ion-toolbar class="new-background-color">
        <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

Answer 2

我使用以下代码段更改标题的颜色：

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Login</ion-title>
    </ion-toolbar>
</ion-header>

您可以使用variables.scss文件中的任何自定义颜色来代替原色颜色。

Answer 3

在您的variable.scss

中

--ion-toolbar-background: var(--ion-color-primary)

或者如果您想为单个页面设置背景，则可以定义如下的CSS类：

.my-toolbar{
    --background:  var(--ion-color-primary);
}

或

.my-toolbar{
    --background:  red;
}

或像法哈德所说的

<ion-toolbar color="primary">

Answer 4

由于样式标签是在<ion-toolbar>上设置的，因此应用了更改。将style添加到<ion-header>。

Answer 5

到目前为止，我看到的所有答案似乎都取决于更改值的原色，从而影响所有按钮和其他UI元素。我只想将工具栏全部更改为一种颜色，所以这就是我放入variables.css

ion-toolbar {
    --color: #ffffff;
    --background: #0d2c6c;
}

Answer 6

应该向{p> ion-header提供background-color，如下所示：

ion-header {
  background-color: #397ffc !important;
}

Answer 7

ion-toolbar 的背景似乎依赖于 ionic 使用 --background 变量在内部设置的变量。图标的颜色是使用 --color 变量设置的。所以要改变它，你应该这样做

ion-header {
  ion-toolbar {
    // set background color
    --background: #0d2c6c;
    // set icon/text color
    --color: #ffffff;
  }
}

你也可以做类似的事情

ion-header {
  ion-toolbar {
    // set background color
    --background: linear-gradient(to right, #000852 0%, #013291 50%,  #000852  100%);
    // set icon/text color
    --color: var(--ion-color-secondary);
  }
}

另请注意，您可以在 ion-header 元素上编辑高度、最小高度等。

这是参考Ionic Docs

如何在ionic 4中设置标题背景颜色

7 个答案: