用于 materializecss 的透明导航栏

Question

我尝试在 materializecss 中使我的导航栏透明，但我所做的所有尝试都将其变成了白色。任何建议都会有所帮助。谢谢。这是我的代码尝试

<nav>
<div class="nav-wrapper transparent">
<a href="#!" class="brand-logo"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Contact Me</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</nav>

第二次尝试我试过这个

<nav class="transnav">
<div class="nav-wrapper">
<a href="#!" class="brand-logo"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Contact Me</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</nav>

使用添加的CSS，这也不起作用。

.transnav {
background-color: rgba(0,0,0,0);
}

Answer 1

您很可能有另一个具有背景颜色的元素。调试它的方法是检查所有处于检查模式的元素(例如：Google Chrome inspect(并查看每个子项的CSS，以可能找到具有白色背景的元素，并覆盖它。

我可以你不管理，你可以用快速和肮脏(非常肮脏(的方式做到这一点。

尝试

.transnav * {
background-color: rgba(0,0,0,0)!important;
}

它将告诉 .transnav 的所有子级具有透明的背景色。

Answer 2

只需将.nav{background:none;}属给您的导航，如果不再有白色背景的元素，请.element{background:none;}所有您想要的透明背景元素。

Answer 3

你应该试试下面的例子。它会为你工作。你错过了 在 CSS 上设置!important

nav{
background-color: transparent !important;
}
.nav-wrapper a{
color: #aaa !important;
}

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>

Answer 4

<nav style="background-color: rgba(0,0,0,0)!important;">