工具栏不显示 CSS 给出的颜色渐变答案

【问题标题】：Toolbar is not displaying the color gradient which is given by CSS工具栏不显示 CSS 给出的颜色渐变
【发布时间】：2019-12-22 17:03:39
【问题描述】：

我希望工具栏不是单一颜色而是渐变，所以有两种颜色。由于颜色属性只采用一种颜色，我将不得不使用 CSS 的背景属性。在网上搜索后，我也尝试过，但没有任何成功。工具栏始终保持白色。我还在下面的 StackBlitz 中重现了这个问题：

StackBlitz：https://stackblitz.com/edit/ionic-v4-rght6l?file=src/app/app.component.html

代码

HTML：

<ion-header>
  <ion-toolbar>
    <ion-title>
       Hello
    </ion-title>
      <ion-buttons slot="primary">
        <ion-button>
         Bye
        </ion-button>
      </ion-buttons>
  </ion-toolbar>
</ion-header>

CSS：

ion-toolbar {
    --ion-background-color: linear-gradient(to right, red 0%, green 100%) !important;
}

【问题讨论】：

标签： html css ionic-framework ionic4

【解决方案1】：

首先，您需要将 SCSS 文件作为组件的一部分导入：

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

接下来，您应该使用--background 而不是--ion-background-color：

ion-toolbar {
   --background: linear-gradient(to right, red 0%, green 100%) !important;
}

工作示例：https://stackblitz.com/edit/ionic-v4-emtady

【讨论】：