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
ou

  • 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 !

0 0 Votes
Évaluation de l'article
S'abonner
Recevoir des notifications pour :
guest

* * Cette case à cocher est obligatoire

*

J'accepte

3 Commentaires
Nouveaux
Anciens Meilleurs votes
Commentaires publiés
Voir tous les commentaires
Regina
Regina
10 années plus tôt

Un grand merci pour cette explication très claire !

lionel@ chef de projet web
lionel@ chef de projet web
11 années plus tôt

Bonjour Jérôme,

Merci pour cette astuce. Une question ! Cette technique est-elle compatible avec les navigateurs les plus utilisés ?

amicalement