Opacité héréditaire
TheFlameflo Le 28 mars 2016 à 17:40 (Édité le 25 janvier 2019 à 17:50)
En appliquant un style d'opacité sur ma barre "nav", tous les éléments à l'intérieur (ul et li) ont un effet d'opacité.
J'aimerais trouver un moyen pour que la barre nav soit transparente mais pas le liens à l'intérieur.
div#nav{
height: 50px;
width: 100%;
background-color: black;
opacity: 0.5;
position: fixed;
}
div#nav>ul
{
display: block;
position: relative;
float: right;
list-style: none;
height: 20px;
margin-right: 20px;
opacity: 1;
}
div#nav>ul>li
{
display: inline-block;
text-align: center;
list-style: none;
margin-top: 10px;
opacity: 1;
color: white;
padding-left: 20px;
}
div#nav>ul>li>a
{
color : white;
text-decoration:none;
}
div#nav>ul>li>a:hover
{
color : white;
border-bottom: 3px solid white;
}
div#nav>ul>li>a:visited
{
color : white;
}
Et le code HTML :
<div id="nav">
<ul>
<li><a href="#slide1">PRÉSENTATION</a></li>
<li><a href="#slide2">SE CONNECTER</a></li>
<li><a href="#slide3">S'INSCRIRE</a></li>
</ul>
</div>Merci d'avance !
PrimFX Le 28 mars 2016 à 21:44
J'ai déjà eu un problème similaire 😋
Si tu veux que ce soit uniquement le fond de ta navbar qui devienne transparent, tu peux te servir du background avec couche alpha, ce qui te permettra d'indiquer l'opacité de ton fond en plus de sa couleur.
Exemple:
div#nav {
/* background-color: black; */
/* Devient: */
background-color: rgba(0, 0, 0, 0.5);
}
