时间戳

首页 > 解决方案 > materializecss 的透明导航栏

html - materializecss 的透明导航栏

问题描述

我尝试让我的导航栏在 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);
}

标签： htmlcssmaterialize

解决方案

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

推荐阅读