Ionic 4 透明透明标头答案

【问题标题】：Ionic 4 transparent transparent headerIonic 4 透明透明标头
【发布时间】：2019-03-05 23:19:17
【问题描述】：

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

这不起作用，并且总是将工具栏留在顶部。我也将此添加到 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 组件样式。

【问题讨论】：

嘿，你能解释一下你想要实现的用户体验是什么 - 你希望标题具有透明背景但仍然能够看到按钮标题等或什么？
应该是--ion-background-color，而不是--ion-toolbar-background-color，正因为这个变化，我一直在苦苦挣扎，现在一切都到位了！ :)
还将--ion-toolbar-text-color替换为--ion-toolbar-color
该解决方案在 Ionic 5 中不起作用。我有一个适用于 Ionic 4 的解决方案，但不知道适用于 ionic 5。

标签： angular ionic-framework ionic4

【解决方案1】：

你试过了吗？

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

【讨论】：

已经尝试过了，它可以使条形透明，但是仍然有条应该在的空间。然后是向上移动内容的问题，没有变量
<ion-toolbar no-padding> 你试过了吗？
是的，Ionic 4 没有任何关于无填充的内容。然而，同样的结果。透明的酒吧，但酒吧所在的空间仍然很大
我最终将其完全删除并手动添加了后退按钮
所以如果一切正常，请检查正确答案按钮:)

【解决方案2】：

如果你想在 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

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

【讨论】：

无论如何都可以在不使用 IonHeader 的情况下这样做，因为它会在样式和布局方面做一些讨厌的事情：-/

【解决方案3】：

这对我有用，标题是透明的，但仍有一些空白

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

但使用 ion-content 中的 ion-toolbar 将其从背景上方删除

<ion-content>
  <ion-toolbar slot="fixed">
  </ion-toolbar>
</ion-content>

【讨论】：

【解决方案4】：

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

如果你想摆脱标题的盒子阴影，你可以在你的 css 中这样做：

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

【讨论】：

【解决方案5】：

试试这个
mypage.page.html

<ion-header no-border no-shadow>

  <ion-toolbar color="medium">
    <ion-title>My Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

</ion-content>

现在把中等颜色的variable.scss文件改成

--ion-color-medium: #ffffff00;

【讨论】：

【解决方案6】：

我试试这个，效果很好

在 variables.scss 中

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

在页面中

<ion-header translucent></ion-header>

<ion-content fullscreen>
    <div class="contenu"></div>
</ion-content>

我还想在 .scss 文件中注意到这一点。我做了

 .contenu {
     position : absolute; 
     top : 0;
     left : 0;
     height: 100vh;
     width: 100vw;
  }

因为内容在标题下

【讨论】：

【解决方案7】：

我遇到了一个问题，ion-content 顶部有空格并且内容从标题下方开始，所以我通过将ion-toolbar 移动到我的ion-content 并使用slot=fixed 固定它的位置来解决它：

<ion-content>

  <ion-toolbar slot="fixed">
    ...
  </ion-toolbar>

  ...

</ion-content>

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

【讨论】：

【解决方案8】：

在 CSS 中

.productHeader {
    --background: transparent;
}

离子 HTML

<ion-header no-border>
  <ion-toolbar class="productHeader">
   .
   .
   .
  </ion-toolbar>
</ion-header>

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

确保在ion-content 中添加fullscreen 为了消除出现在标题中的阴影，我添加了no-border

【讨论】：

【解决方案9】：

这两种解决方案都不适合我（Ionic 5、Angular 11），但最终实现了：

ion-content {
  position: absolute;
  top: 0;
}

【讨论】：

【解决方案10】：

也许我有点晚了，但对于任何与 Ionic 5 或更高版本处于相同情况的人来说，您都可以这样做：

ion-toolbar {
    --opacity: 0;
}

并且工具栏背景将是透明的。它在离子工具栏中documentation

【讨论】：