Ionic 4 透明透明标头

Question

我有一个 Ionic 4 应用程序，我想要一个透明的标题。Ionic 文档指出必须将“全屏”添加到离子内容中，并且必须将“半透明”添加到离子工具栏。

这不起作用，并且始终将工具栏留在顶部。我也将其添加到 css 中：

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

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

我能找到的实现透明标题效果的唯一方法是当我转到 chrome 中的 Shadow DOM 并向类“inner-scroll”添加背景属性时

但是，此类中没有与背景颜色相关的变量，因此我无法使用此方法更改背景。

我怎样才能让这个透明的标题/工具栏工作！？

解决方案：

对于遇到此问题的其他任何人 - 文档根本不清楚。要获得完全透明的功能标头：

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

没有在css中添加以下内容：

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

该文档仅指定了 HTML 方面的内容，但是对于 Ionic 中的新 Shadow DOM，必须使用变量来更改大多数 Ionic 组件样式。

Answer 1

...    
<ion-toolbar color="translucent"> 
...

如果你想去掉标题的框阴影，你可以在你的 css 中这样做，如下所示：

.header::after {
  background-image: none;
}

Answer 2

你试过这个吗？

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

Answer 3

如果你想要 ionic 4 中的半透明标题，你需要将“半透明”属性添加到标题标签，而不是工具栏标签。

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- content here -->
</ion-content>

来自离子文档... 半透明

属性：translucent 类型：boolean 如果为 true，则标头将是半透明的。注意：为了滚动标题后面的内容，需要在内容上设置全屏属性。默认为 false。