Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: TheFlameflo
Ce topic a été résolu
Auteur Sujet: Opacité héréditaire

TheFlameflo

Messages: 304

Bonjour,
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 !
Publicité

PrimFX
Membre Premium

Messages: 114

Salut !

J'ai déjà eu un problème similaire Tire la langue

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);
}
Les 0, 0, 0 correspondent au code RGB de ta couleur et la dernière valeur (0.5 dans mon exemple), est l'opacité de la couleur, qui peut varier entre 0 et 1 (comme la propriété opacity) Sourire

TheFlameflo

Messages: 304

Salut !
Merci beaucoup de ta réponse, ça marche super bien !

PrimFX
Membre Premium

Messages: 114

Cool ! De rien Clin d'oeil


Veuillez vous connecter ou créer un compte pour poster une réponse