离子奇怪的行为

Question

您好，我正在尝试将渐变背景设置为离子工具栏，

.logo-toolbar {
        background: linear-gradient(to right, #fff 25%, #004b7a 35%, #004b7a 68%, #004b7a 100%) !important;
        border-bottom: 3px solid #f48726 !important;
        transition: all 0.3s linear;
}

<ion-toolbar class="logo-toolbar">
  <ion-title>
    <img src="../../assets/img/sys.jpg" class="logo"/>
  </ion-title>
</ion-toolbar>

显示了上面的代码边框，但未设置背景，但是当我为 ion-title 添加颜色时，它就可以工作了，

 <ion-toolbar  color="pink" class="logo-toolbar">
    <ion-title>
      <img src="../../assets/img/sys.jpg" class="logo"/>
    </ion-title>
  </ion-toolbar>

这里发生了什么？

Answer 1

我找到了解决方案，

Ionic 使用自定义属性为工具栏设置背景，它始终具有更高的优先级，需要覆盖它，

--background: linear-gradient(to right, #fff 25%, #004b7a 35%, #004b7a 68%, #004b7a 100%) !important;

P.S : 不知道黑客是如何工作的。

离子奇怪的行为

Ionic strange behavior

css

ionic4