如何使 Ionic 中的导航栏（ion-nav-bar）透明？

Question

我正在使用 Ionic sidemenu 模板：ionic start myApp sidemenu

它会生成一个包含一些有用工具和默认配置的示例项目。

我正在努力实现它以使标题栏 (ion-nav-bar) 透明。

这里是 plunker：https://plnkr.co/edit/qM3YsJ?p=preview

默认使用 (menu.html)

<ion-nav-bar class="bar-stable">

我一周前在 Ionic 论坛上问过这个问题 - https://forum.ionicframework.com/t/how-to-make-nav-bar-transparent/49250 - 我什至设法找到了解决方法，但如果我可以让标题（导航）栏透明，那就容易多了。

---

这是一个有效的 codepen 示例：http://codepen.io/Samurais/pen/dPRMKL

问题是 - 当我用 1.0.0-beta.1 替换为 1.2.4 时，它不再起作用了。

编辑：

很多人建议background-color: transparent !important - 显然 - 但由于许多基础元素，定位，translate3D，z-index...我的意思是如果它是那么微不足道我大概现在就想通了。

很多人建议隐藏导航栏，这正是我所做的：

我什至设法找到了解决方法

但这是一种解决方法，因为我正在重新创建许多不酷的默认原生元素。

最后...编辑 Plunker 需要 10 秒。分叉它需要 20 秒，获取 URL 并使用实际工作 URL 进行回复，而不是一些未经测试的解决方案。

感谢您教我如何成为更好的沟通者。我认为声明“我想让导航栏透明”和上下文（链接、plunker、替代解决方案、我在论坛上的帖子）很清楚，显然我需要提高我的沟通技巧。

Answer 1

更新 plnkr：https://plnkr.co/edit/qM3YsJ?p=preview

ion-content.has-header {
  top: 0;
}

.bar {
  background-color: transparent;
}

.bar-header {
  border-bottom-width: 0px;
}

（默认支持透明类会更简洁）

Answer 2

这是在我的 HTML 网站导航栏的 css 文件中，我有此代码。

.navbar-inverse{
    background-color:#202148;
    border-color: #202148;
    }

如果你想让背景颜色透明使用：

background-color: transparent;

编辑

我找到了这个关于 ion-nav-bar 的教程。

http://pointdeveloper.com/ionic-change-side-menu-color/

检查一下。 希望这会有所帮助:)