如何使离子导航透明？

Question

我想离子标题或导航透明，所以我可以在图片上显示。但是将背景颜色设置为透明并不能解决问题。内容应为＆＃34;全屏＆＃34;比。如果可能，内容应位于状态栏后面。

Answer 1

所以你需要做一些事情。首先，正如Dennis所说，我写了一个小教程，用于将标题设置为透明，您可以详细检查here。

• 首先，您将transparent输入属性添加到nav-bar，这基本上会将background:transparent !important添加到工具栏中。
• 您还可以通过向no-border添加ion-header来删除Android上显示的border-shadow。
• 然后你想删除.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所以你可以用它作为参考。

Answer 2

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

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

Answer 3

This正是您所寻找的：

  

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

因此，您只需要在您的内容中添加fullscreen="true"，就像这样

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