时间戳

首页 > 解决方案 > Ionic 4：透明标题

css - Ionic 4：透明标题

问题描述

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

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

标签： cssweb-componentcss-variablesionic4

解决方案

我今天遇到了同样的问题，并找到了以下解决方案来让我的菜单在 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

IONIC 4 中的透明工具栏

推荐阅读