如何使 ion-nav 透明？

Question

我想要 ion header 或 nav 透明，所以我可以像图片上显示的那样。但是将 background-color 设置为透明并不能解决问题。内容应该是"fullscreen"比。如果可能，内容应该在状态栏后面。

Answer 1

This 是您要找的：

By default, content is positioned between the headers and footers. However, using fullscreen="true", the content will be able to scroll "under" the headers and footers. At first glance the fullscreen option may not look any different than the default, however, by adding a transparency effect to a header then the content can be seen under the header as the user scrolls.

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

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

Answer 2

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

您可以轻松编辑 ion-header：<ion-header no-border>（删除 android 设备上的边框）
将 transparent 属性添加到导航栏：<ion-navbar transparent>

Answer 3

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

所以首先你将 transparent 输入属性添加到你的 nav-bar，这基本上将 background:transparent !important 添加到工具栏。
您还可以删除 android 上显示的 border-shadow，方法是将 no-border 添加到您的 ion-header。
然后您想要删除 .scroll-content 上的 top-padding，因此忽略 header 填充。为此，只需添加 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所以你可以作为参考。

如何使 ion-nav 透明？

How to make the ion-nav transparent?

typescript

ionic2

ionic3

angular