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：不知道黑客是如何工作的。

离子异常行为

1 个答案: