Comment obtenir un élément img à afficher sous une image de fond dans CSS

Question

Fondamentalement, j'essaie de placer une div semi-transparente sur une image pour servir d'arrière-plan pour le texte d'un diaporama. Malheureusement, le navigateur semble toujours vouloir afficher le img sur le background-image. Est-ce qu'il y a un moyen de réparer ceci?

Voici mon CSS actuel pour la div semi-transparent:

#slideshow .info 
{ 
    height: 80px; 
    margin-top: -80px; 
    background: url(../../images/slideshow-info-pixel.png) repeat; 
} 

... avec slideshow-info-pixel.png étant un seul pixel, une opacité de 50%, PNG 24.

Je l'ai jusqu'à présent essayé z-index et le CSS doit être compatible avec IE6.

Answer 1

Si je me trompe, ce que vous faites est que vous avez l'image insérée dans le code HTML, alors vous avez la div div rendu avec css.

Ma suggestion serait:

• ont l'image d'arrière-plan également rendu par css
• utiliser la propriété de position (il est en fait essentiel)
• Utilisez z-index pour rendre un div sur l'autre

CSS:

.yourImage 
{ 
    position: relative; 
    background: url(./yourImage.png); 
    width: 800px; 
    height: 600px; 
    z-index: 20; 
} 

. transparent 
{ 
    position: relative; 
    background: url(./transparent.png) repeat; 
    width: 800px; 
    height: 600px; 
    z-index: 30; 
} 

.yourText 
{ 
    position: relative; 
    z-index: 40; 
} 

Si vous voulez vraiment vous assurer que votre CSS est compatible avec IE6, vous devriez en faire un autre modèle. Sérieusement, s'assurer que vous respectez toutes les bizarreries IE6 est une énorme perte de temps. Le moyen le plus rapide est simplement de faire une version plus simple de votre page que seul l'utilisateur IE6 verrait.

Answer 2

Vous devez mettre l'image dans un autre élément qui est derrière l'élément avec une image d'arrière-plan. L'image de fond restitue toujours le plus à l'arrière.