Html 具体化CSS透明导航栏
我无法使导航栏透明。相反,显示的是白色背景。我甚至尝试过编辑MaterializeCSS源文件并添加“透明”类,但没有任何变化。有没有人能解决这个问题Html 具体化CSS透明导航栏,html,css,materialize,Html,Css,Materialize,我无法使导航栏透明。相反,显示的是白色背景。我甚至尝试过编辑MaterializeCSS源文件并添加“透明”类,但没有任何变化。有没有人能解决这个问题 <div class="navbar-fixed transparent"> <nav class="transparent"> <div class="nav-wrapper transparent"> <a href="#" class="brand-logo center"&
<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">
☰
</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>
将元素的背景色设置为透明将继承默认为白色的容器背景色。我使用了一个简单的CSS解决方案,该解决方案应该可以工作:
.transparentBG {
background-color: rgba(0,0,0,0);
}
然后将这个类放在nav标记中,在使navbar固定的div之后,不需要在整个代码中复制
.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文件中,它应该可以工作 Materialize已经有了一个透明类:仍然帮助我找到它,所以thx!当我使用时,它不起作用,所以我创建了这个变通方法。。。但后来我发现我失踪了。。。hahaBut文本颜色为白色,使其透明也会使文本消失尝试为正文添加不同的背景色,并查看导航栏颜色是否发生变化