如何使离子导航透明？答案

【问题标题】：How to make the ion-nav transparent?如何使离子导航透明？
【发布时间】：2016-12-16 12:31:33
【问题描述】：

我想要离子标头或导航透明，所以我可以像图片上显示的那样。但是将背景颜色设置为透明并不能解决问题。内容应该是“全屏”比。如果可能，内容应该在状态栏的后面。

【问题讨论】：

【解决方案1】：

This 就是你要找的东西：

默认情况下，内容位于页眉和页脚之间。但是，使用fullscreen="true"，内容将能够滚动 “在”页眉和页脚下。乍一看全屏选项看起来可能与默认设置没有什么不同，但是，通过添加透明效果到标题然后可以在下面看到内容用户滚动时的标题。

所以你只需要像这样在你的内容中添加fullscreen="true"

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

【讨论】：

【解决方案2】：

我找到了一个非常好的解决方案：Tutorial

【讨论】：

【解决方案3】：

因此，您需要做一些事情。首先，正如丹尼斯所说，我写了一个设置标题为透明的小教程，您可以详细查看here。

首先将transparent 输入属性添加到nav-bar，这基本上将background:transparent !important 添加到工具栏。
您还可以通过将no-border 添加到ion-header 来移除android 上显示的边框阴影。
然后您想删除.scroll-content 上的顶部填充，因此标题填充将被忽略。为此，只需添加 top-padding: 0。
如果您想在幻灯片上添加渐变层，您必须使用.slide-zoom，它由ion-slide 自动生成。您可以将其高度和宽度设置为 100%，然后添加类似 background: linear-gradient(0deg, rgba(226, 135, 106, 0.84) 0%, rgba(255, 93, 152, 0.85) 100%) !important; 的内容
要更改项目符号样式，您必须使用 .swiper-pagination-bullet 和 .swiper-pagination-bullet-active。

我写了一个非常简单的例子来实现你的愿望：

如果这是你想要的，我published a repo 这样你就可以作为参考。

【讨论】：