CSS couvrant une div avec d'autres qui ont obtenu l'opacité réglée avec css

Question

Salut les amis Voici ce que je suis entré en css:

#loading { 
background:#000 url(loading.png) center; 
opacity:0.5; 
cursor:auto; 
min-height:250px; 
z-index:15; 
} 

#main { 
padding: 10px; 
z-index:1; 
} 

et en html:

<div id="loading"> 
     <div id="main">Something here</div> 
</div> 

et j'attends la loading.png pour couvrir le div # principal mais il ne le fait pas et "Quelque chose ici" reste sur le dessus de loading.png!?

Mise à jour: l'arrière-plan est en CSS et non une image en cours de chargement div.

Answer 1

Votre HTML est erroné. Le div main devrait être en dehors la div loading:

<div id="main"> 
    <div id="loading"></div> 
    Something here 
</div> 

Vous devez également placer ce dernier div en utilisant le CSS pour qu'il ne se contente pas pousser le contenu principal hors de dessous, ainsi que le dimensionnement de la div à 100% de la largeur et de la hauteur de son conteneur:

#main { position: relative; } 

#loading { 
background: url("loading.png"); 
opacity: 0.5; 
cursor:auto; 
width: 100%; 
height: 100%; 
z-index:15; 

/* Positioning */ 
position: absolute; 
left: 0; 
top: 0; 
}