Attribut d'opacité Css

Question

J'ai une question. Voici par exemple:

nav { 
 
    width: 100%; 
 
    background: #000; 
 
    opacity: 0.8; 
 
} 
 

 
ul { 
 
    background: green; 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    </ul> 
 
</nav> 
 
<header> 
 
    <h1>123</h1> 
 
</header>

Et Le problème est que, ul est également opacity. Par tout cela, je veux dire que nav tag est correct, il a une opacité de 0,8, mais mon tag ul ne devrait pas avoir l'opacité, et il ne fonctionne pas si vous regardez dans css dans le navigateur, mais je peux toujours voir h1 texte derrière le ul et li étiquette.

Answer 1

nav { 
 
    width: 100%; 
 
    //background: #000; 
 
    //opacity: 0.8; 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
} 
 

 
ul { 
 
    background: green; 
 
    //opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    </ul> 
 
</nav> 
 
<header> 
 
    <h1>123</h1> 
 
</header>

Comment l'utilisation rgba()?

Answer 2

Vous devez utiliser rgba(), où le 4ème paramètre prend 0.0 pour complètement transparent jusqu'à 1,0 pour complètement opaque tandis que les trois premiers paramètre prend la red, blue, valeur green de la couleur que vous souhaitez utiliser.

nav { 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.8); 
 
} 
 

 
ul { 
 
    background: green; 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    </ul> 
 
</nav> 
 
<header> 
 
    <h1>123</h1> 
 
</header>