Ionic 5 ion-tab-bar 渐变背景

Question

大家好，我想将 ion-tab-bar 背景设置为渐变，就像 image 中的工具栏一样。

我尝试过的。 （按预期设置工具栏，但不能按标签栏的预期工作）

--ion-toolbar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-toolbar-color: var(--ion-color-light);

--ion-tab-bar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-tab-bar-color: var(--ion-color-light);

检查Ionic 4 Tabs styling 我尝试了以下但仍然相同的结果。

ion-tab-bar {
  --ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}

ion-tabs ion-tab-bar {
  --ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}

感谢所有帮助。

Answer 1

我已经修复了它使用

ion-tab-bar {
--background: transparent;
background-image: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
}