MENU TRANSPARENTE FIXO

Ola galera bom dia..

Eu estou tentando colocar meu menu fazendo ele ficar transparente quando rolar a barra para baixo

fazendo que ele fica com uma masca preta porem transparente de forma que quando vai rolando pra baixo de pra ver

o fundo

Ou seja que fique uma mascara preta porem clara não o preto forte de mais eu fiz só que esta claro de mais o fundo e já tentei mudar

do jeito que quero  e não deu certo

Este é o meu css do navbar

/================header Fixed Scroll======================/
#header-fix.nav-affix .navbar {

 background: transparent !important;
 background: solid 1px #000;

 box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
 border-color: #000;
 transition: 0.3s; }

.header.nav-affix nav.navbar-toggleable-md.navbar-light .navbar-nav .nav-link {

 padding: 1.3em 1.3em;
 transform: translate(0, 0) scale(1);
 transition: 0.3s; }

.transperant nav.navbar-toggleable-md.navbar-light {
background: transparent; }

Este é o menu que estou usando

<!-- header -->

 <div id="header-fix" class="header fixed-top transperant">
 <nav class="navbar navbar-toggleable-md navbar-expand-lg navbar-light py-lg-0 py-4">
 <a class="navbar-brand mr-4 mr-md-5" href="./"><img src="img/20182018.png" width="30%" alt="Brond Bar"></a>
 <div id="dl-menu" class="dl-menuwrapper d-block d-lg-none float-right">
 <button>Open Menu</button>
 <ul class="dl-menu">

 <li class="nav-item active dropdown">
 <li><a href="/home">Home</a></li>
 <li><a href="/sobre">Sobre</a></li>
 <li class="nav-item dropdown">
 <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">Explorar</a>
 <ul class="dl-submenu">
 <li><a href="/modulos/duvidas_frequentes">Dúvidas Frequentes</a></li>
 <li><a href="/modulos/regras">Regras</a></li>
 <li><a href="/modulos/contrato">Contrato</a></li>
 </ul>
 </li>
 <li class="nav-item dropdown">
 <li><a href="/planos">Planos</a></li> </li>
 <li><a href="/orcamento">Orçamento</a></li>

 <li><a href="/contato">Contato</a></li>

 </li>

 </ul>
 </div>
 <div class="collapse navbar-collapse " id="header-fix" class="header fixed-top transperant">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active dropdown"> <a class="nav-link" href="/home">Home</a>

 <li class="nav-item active dropdown"> <a class="nav-link" href="/sobre">Sobre</a>

 <li class="nav-item dropdown"> <a class="nav-link" href="#" data-toggle="dropdown" aria-expanded="false">Explore <i class="fa fa-angle-down"></i></a>
 <ul class="dropdown-menu">
 <li><a href="/modulos/duvidas_frequentes">Dúvidas Frequentes</a></li>
 <li><a href="/modulos/regras">Regras</a></li>
 <li><a href="/modulos/contrato" target="_blank">Contrato</a></li>
 </ul>
 </li>

 <li class="nav-item active dropdown"> <a class="nav-link" href="/planos">Planos</a>

 <li class="nav-item active dropdown"> <a class="nav-link" href="/orcamento">Orçamento</a>

 <li class="nav-item active dropdown"> <a class="nav-link" href="/contato"> Contato</a></li>

 </ul>
 </div>
 </nav>

	             Se alguém poderem me dar uma ajuda ai por favor!