Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Giihh

Background transparente sem impactar conteudo

Recommended Posts

Olá

 

Tenho um sidebar que não estou conseguindo acertar corretamente. O efeito de transparência esta funcionando, mas não na div que quero.

o que desejo é basicamente:

 

<div> que possui a classe com a imagem background mas tenha efeito rgba(0, 0, 0, 0.5) e seja height 100% pra imagem e transparencia pegar o sidebar inteiro

<nav>

lista menu

</nav>

</div>

 

O código html (que é de um modelo que comprei) esta assim (sem div antes do nav mesmo, tentei inserir antes com a classe mas não funcionou a transparencia nem o height 100%). Da forma que esta abaixo esta funcionando, mas o backgound e a transparencia só fica dentro da lista e o restante no sidebar fica vazio.

<nav id="sidebar" role="navigation" class="navbar-default navbar-static-side" style="min-height: 100%;">
	<div class="sidebar-collapse menu-scroll">
		<ul id="side-menu" class="nav">
			lista li menu
		</ul> <!-- #side-menu -->
	</div> <!-- .sidebar-collapse menu-scroll -->
</nav>

Arquivos css que estão relacionados:

<!-- no arquivo tema.css-->
#sidebar {
background-image: url("/imagens/bg/bg_sidebar.jpg");
margin: 0;
height: 100%;
}

.navbar-static-side ul li {
border-bottom: 1px solid #374d63;
background-color: rgba(0, 0, 0, 0.5);
}


<!-- no arquivo bootstrap.css-->
.navbar-static-side {
z-index: 1;
position: absolute;
width: 250px;
}
 
<!-- no arquivo bootstrap.min.css-->
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
 
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}

<!-- no arquivo style-responsive.css--> 
.sidebar-collapse {
display: block;
}

 

 

e a transparencia só funcionou colocando background no nav (id=siderbar) e a transparencia no li usando a classe.navbar-static-side ul li

 

<update>

 

Agora entendi que o que esta transparente é a lista, mas preciso que a lista cubra 100% o sidebar

 

alguma dica de como resolver?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.