微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angular – 如何使离子导航透明?

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

enter image description here

解决方法

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

>首先,您将透明输入属性添加到导航栏,这基本上添加了背景:透明!对工具栏很重要.
>此外,您可以通过向您的离子标题添加无边框来删除android上显示的border-shadow.
>然后你想删除.scroll-content上的top-padding,所以忽略了标题填充.为此,只需添加top-padding:0.
>如果您希望在幻灯片添加渐变图层,则必须使用.slide-zoom,它由离子幻灯片自动生成.您可以将其高度设置为100%以及宽度,然后添加类似背景的内容:线性渐变(0deg,rgba(226,135,106,0.84)0%,rgba(255,93,152,0.85)100%) !重要;
>要更改子弹样式,必须使用.swiper-pagination-bullet和.swiper-pagination-bullet-active.

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

enter image description here

如果这是你想要的,我published a repo所以你可以用它作为参考.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐