Ionic 4：透明标题

Question

我想让我的标题背景颜色透明。我的 HTML 如下：

帐户.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button defaultHref="home"></ion-back-button>
        </ion-buttons>
        <ion-title>Account</ion-title>
    </ion-toolbar>
</ion-header>

账户.page.scss

ion-header {
    --ion-toolbar-background-color: rgba(0, 0, 0, 0);
}

这使得 bg 颜色为白色，而不是透明。我还尝试background: transparent通过 Chrome Inspector 对每个元素进行设置。但我只是得到white.

任何帮助如何实现这一目标？

Answer 1

我今天遇到了同样的问题，并找到了以下解决方案来在 Ionic 5 中使用透明工具栏获取我的菜单。

将内容设置为[fulscreen]="true". 使用 删除工具栏颜色--background: transparent。使用 将工具栏设置到页面顶部position: absolute; top: 0;。

ion-toolbar {
  --background: transparent no-repeat fixed center;
  --color: black;
  position: absolute;
  top: 0;
}

删除标题中的阴影 class=ion-no-border