Question

我无法使导航栏透明。相反，显示的是白色背景。我甚至尝试编辑materialize css源文件并添加“透明”类并且没有任何更改。有没有人为此做过工作？

<div class="navbar-fixed transparent">
<nav class="transparent">
    <div class="nav-wrapper transparent">
        <a href="#" class="brand-logo center">KAYWA</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse" id="btncollapse">
            &#9776;
        </a>
        <ul class="left hide-on-med-and-down transparent">
            <li><a href="#" class="link">HOME</a></li>
            <li><a href="#" class="link">ABOUT US</a></li>
            <li><a href="#" class="link">SOCIAL MEDIA</a></li>
            <li><a href="#" class="link">CONTACT US</a></li>
        </ul>
        <ul class="right hide-on-med-and-down transparent">
            <li><a href="#" class="link"><i class="fa fa-instagram fa-2x"></i></a></li>
            <li><a href="#" class="link"><i class="fa fa-facebook fa-2x"></i></a></li>
            <li><a href="#" class="link"><i class="fa fa-twitter fa-2x"></i></a></li>
            <li><a href="#" class="link"><i class="fa fa-google-plus fa-2x"></i></a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">SOCIAL MEDIA</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#"><i class="fa fa-instagram fa-2x"></i></a></li>
            <li><a href="#"><i class="fa fa-facebook fa-2x"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter fa-2x"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus fa-2x"></i></a></li>
        </ul>
    </div>
</nav>

Answer 1

将元素的背景颜色设置为透明会继承容器的背景颜色，默认情况下为白色。

Answer 2

我使用了一个应该有效的简单CSS解决方案：

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

然后你将这个类放在nav标签中，在使导航栏固定的div之后，不需要在整个代码中复制。

Answer 3

.z-depth-1, 
nav, 
.card-panel, 
.card, 
.toast, 
.btn, 
.btn-large, 
.btn-small, 
.btn-floating, 
.dropdown-content, 
.collapsible, 
.sidenav {
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0), 0 3px 1px -2px rgba(0,0,0,0), 0 1px 5px 0 rgba(0,0,0,0);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0), 0 3px 1px -2px rgba(0,0,0,0), 0 1px 5px 0 rgba(0,0,0,0);
}

将此粘贴到一个css文件中，它应该可以工作！

实现CSS透明导航栏

3 个答案: