我想离子标头或导航透明，所以我可以像图片上显示的那样。但是将背景颜色设置为透明并不能解决问题。内容应该是“全屏”比。如果可能，内容应该在状态栏的后面。
问问题
6557 次
3 回答
10
因此，您需要做几件事。首先，正如丹尼斯所说，我写了一个小教程，用于将标题设置为透明，您可以在此处详细查看。
- 因此，首先将
transparentinput 属性添加到您的nav-bar中，这基本上会添加background:transparent !important到工具栏。 - 您还可以通过添加
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。
我写了一个非常简单的例子，试图实现你想要的：
如果这是您希望的，我发布了一个 repo，以便您可以将其用作参考。
于 2017-05-10T18:35:17.927 回答
7
我找到了一个非常好的解决方案：教程
- 您可以轻松编辑 ion-header：（
<ion-header no-border>删除 android 设备上的边框） - 将透明属性添加到导航栏：
<ion-navbar transparent>
于 2017-05-09T07:08:39.057 回答
4
这就是你要找的：
默认情况下，内容位于页眉和页脚之间。但是，使用
fullscreen="true"，内容将能够在页眉和页脚“下方”滚动。乍一看，全屏选项可能看起来与默认选项没有任何不同，但是，通过向标题添加透明效果，当用户滚动时，可以在标题下看到内容。
所以你只需要fullscreen="true"像这样添加你的内容
<ion-content fullscreen="true">
<!-- ... -->
</ion-content>
于 2016-08-10T09:24:29.750 回答