如何使离子导航透明?

rak*_*ete 6 typescript ionic2 ionic3 angular

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

在此输入图像描述

Yan*_*aga 10

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

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

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

在此输入图像描述

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


Den*_*ann 7

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

  1. 你可以轻松编辑ion-header :( <ion-header no-border>删除android设备上的边框)
  2. 透明属性添加到导航栏:<ion-navbar transparent>