Css 离子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>

这使得bg颜色为白色，而不是透明。我还尝试了通过Chrome Inspector对每个元素进行设置

background:transparent

。但我只得到了

白色

---

如何实现这一点有什么帮助吗？

将全屏添加到

将无边框添加到

---

你的想法是对的。将离子工具栏作为目标，而不是SCS中的离子标题

账户.page.scss

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

如前所述，您将向ion标题元素添加

无边框

，并向ion内容添加

全屏

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>

---

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

将内容设置为

[fulscreen]=“true”

。使用

--背景：透明删除工具栏颜色。使用
位置：绝对，将工具栏设置到页面顶部；排名：0

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

用
class=ion无边框删除标题中的阴影

仅将此类添加到
中。您可以为离子内容和离子工具栏设置颜色

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

如何删除IOS和Android上的ionic工具栏阴影

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

这并不能解决这个问题——爱奥尼亚的文档说明必须将“全屏”添加到内容中，并且必须将“半透明”添加到工具栏中。但是，这不起作用。我只是将ion工具栏背景设置为透明的scss文件，并将其修复。不鼓励只回答问题代码。请添加一些解释，说明这是如何解决问题的，或者这与现有答案有何不同。为我工作！谢谢！
ion-toolbar {
  --background: transparent no-repeat fixed center;
  --color: black;
  position: absolute;
  top: 0;
}

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

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