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

发布时间：2020-12-17 06:57:43 所属栏目：安全来源：网络整理

导读：我想离子标题或导航透明,所以我可以在图片上显示.但是将背景颜色设置为透明并不能解决问题.内容应该是“全屏”而不是.如果可能,内容应位于状态栏后面. 解决方法所以你需要做一些事情.首先,正如Dennis所说,我写了一个小教程,用于将标题设置为透明,您可以详细

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

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所以你可以用它作为参考.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!