css - Ionic 4：透明标题

Question

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

account.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>

account.page.scss

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

这使得背景颜色为白色，而不是透明。我还尝试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

Answer 2

将全屏添加到<ion-content>

<ion-content fullscreen>

</ion-content>

添加无边框到<ion-header>

<ion-header no-border>

</ion-header>

Answer 3

仅将此类添加到<ion-toolbar>. 您可以为 ion-content 和 ion-toolbar 设置颜色。

ion-toolbar.transparent {
  --background     : transparent;
  --ion-color-base : transparent!important;
  position         : absolute;
  top              : 0;
}

Answer 4

你有正确的想法。定位ion-toolbar而不是 scss 中的 ion-header。

account.page.scss

ion-toolbar {
  --background: transparent;
  --ion-color-base: transparent !important;
}

如前所述，您将添加no-border到ion-header元素和fullscreenion -content。

account.page.html

标题

<ion-header no-border>
    <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>

内容

<ion-content fullscreen>

</ion-content>

Answer 5

如何在 IOS 和 Android 上删除离子工具栏阴影

/* Remove bottom border on ios */
    .header-ios ion-toolbar:last-child {
      --border-width: 0;
    }
    
    //remove bottom shadow android
    .header-md::after {
      display: none;
    }