Ionic 4：透明标题答案

【问题标题】：Ionic 4: Transparent HeaderIonic 4：透明标题
【发布时间】：2019-01-25 03:25:11
【问题描述】：

我想让我的标题背景颜色透明。我的 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);
}

这会使背景颜色变为白色，而不是透明。我还尝试通过 Chrome Inspector 为每个元素设置 background: transparent。但我只收到white。

任何帮助如何实现这一点？

【问题讨论】：

标签： css web-component css-variables ionic4

【解决方案1】：

将全屏添加到<ion-content>

<ion-content fullscreen>

</ion-content>

将无边框添加到<ion-header>

<ion-header no-border>

</ion-header>

【讨论】：

这并不能解决问题 - Ionic 文档指出必须将“全屏”添加到内容中，并且必须将“半透明”添加到工具栏。但是，这不起作用。
我只是将 ion-toolbar 背景设置为透明的 scss 文件并解决了问题

【解决方案2】：

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

account.page.scss

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

如前所述，您可以将no-border 添加到ion-header 元素，并将fullscreen 添加到ion-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>

【讨论】：

不鼓励仅使用代码回答。请添加一些解释，说明这是如何解决问题的，或者这与现有答案有何不同。 From Review

【解决方案3】：

我今天遇到了同样的问题，并找到了以下解决方案，以在 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去除标题中的阴影

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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;
    }

【讨论】：