如何使离子导航透明？

Question

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

Answer 1

所以你需要做一些事情.首先,正如Dennis所说,我写了一个小教程,用于将标题设置为透明,您可以在此处详细查看.

首先,您将transparent输入属性添加到您的nav-bar,这基本上添加background:transparent !important到工具栏.
你还可以去除边框阴影是通过将显示在Android上no-border你ion-header.
然后你想删除顶部填充.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.

我写了一个非常快速的例子,试图实现你想要的:

如果这是你想要的,我发布了一个回购,所以你可以用它作为参考.

Answer 2

我找到了一个非常好的解决方案:教程