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

你很可能有另一个有背景颜色的元素。调试它的方法是检查Inspect模式下的所有元素（例如：Google Chrome检查）并查看每个子项的CSS，以便找到具有白色背景的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;">

materializecss的透明导航栏

4 个答案: