Erreur d'opacité en HTML

-2

J'ai besoin d'un fond d'opacité et tout fonctionne bien mais quand j'ajoute de l'opacité à l'arrière-plan je ne peux pas utiliser ma barre. Si vous copiez et collez le code, vous verrez tout avec opacité, mais je ne peux pas utiliser les boutons de la barre et je veux que l'arrière-plan soit 0.5 opacité, pas tout le site Web.Erreur d'opacité en HTML

#background { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url('https://i.ytimg.com/vi/3KNQfA21QyQ/maxresdefault.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: 100%; 
 
    opacity: 0.5; 
 
    filter:alpha(opacity=80); 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a, .dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, .dropdown:hover .dropbtn { 
 
    background-color: red; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<ul> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
\t </li> 
 
\t <li class="dropdown"> 
 
\t  <a href="javascript:void(0)" class="dropbtn">Home</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
\t </li> 
 
\t \t <li class="dropdown"> 
 
\t  <a href="javascript:void(0)" class="dropbtn">News</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 
</ul>

Source

2017-03-10 TMU RecKLesS

Vous aviez/le style mal orthographié. Veuillez corriger l'extrait que j'ai fait pour vous - vous devez mettre les étiquettes dans le bon ordre, vous avez beaucoup d'étiquettes de corps. Aussi vous avez plus d'erreurs d'orthographe! ombre par exemple – mplungjan

Comment puis-je copier coller le code ?? –

Modifier l'extrait en cliquant sur "modifier l'extrait" et changer le code pour être valide HTML et CSS valide – mplungjan

Votre CSS il est "correct", le foiré il est sur HTML. Essayez de réorganiser ce corps avant toute la structure première:

<body class="my-container" bgcolor="black"> 
<ul> 
<li class="dropdown"> 
<a href="javascript:void(0)" class="dropbtn">dropdown</a> 
<div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 1</a> 
    <a href="#">Link 1</a> 
</div> 
</li> 
</ul> 
<div id="background"></div> 
</body>

Ensuite, définissez le z-index de #background à plus bas que votre structure entière:

ul { position: relative; z-index: 3; } 
#background { position: fixed; z-index: 1; }

Source

2017-03-10 17:06:24 felipekrust

qui a travaillé thx ^^ –

Pas de problème! De plus, la propriété "box-shadow" a été mal orthographiée, jetez un oeil. – felipekrust

je l'ai eu de w3school –

Erreur d'opacité en HTML

Répondre

Questions connexes