Créer un fond de couleur transparent dans une div en épargnant le contenu

Nombre d’entre vous ont été confronté à ce problème un jour ou l’autre : Comment réaliser une div avec un fond transparent sans impacter le contenu de la div en question ?

Afin de répondre à cette problématique, deux possibilités sont envisageables :

• créer un fond transparent au format png en repeat

• utiliser l’astuce suivante : dans la div contenant le texte et les images, on créé une nouvelle div que l’on ouvre et ferme tout de suite. Cette nouvelle div sera vide et on lui appliquera des styles permettant de créer un fond transparent coloré.

<div style="position: relative; z-index: 2;">
   <div style="background-color: #884DA7; position:absolute; z-index:-1;
top:0; left:0; right:0; bottom:0; opacity:0.5;"></div>
   <p>Votre texte et vos images ....</p>
</div>

Bien évidemment, il est plus intéressant de mettre les styles des divs  dans une feuille de style.

On aurait alors le code suivant dans la page HTML … :

<div class="contenu">
   <div class="fond"></div>
   <p>Votre texte et vos images ....</p>
</div>

… Et le code de la feuille de style (CSS) suivant :

.contenu{
position: relative;
z-index: 2;
}

.fond{
background-color: #884DA7;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.5;
z-index:-1;
}

A vous de jouer !