Les DIV transparents en CSS

Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes :

Rendre le DIV ainsi que le contenu transparent

• Le div lui même sera transparent, mais aussi l'ensemble du contenu tel que les images ou le texte.

<div style="filter:alpha(opacity=50); opacity:0.5;">........</div> 

La propriété opacity est prise en compte par firefox 3+, Chrome 2+, Safari 4 (pas testé 3) ainsi que Opera 10. La propriété filter:alpha(opacity=50) permet à Internet Explorer 8 (pas 7) et Opera 9.x de rendre la transparence.

Rendre le DIV transparent sans que le contenu ne le soit

Utiliser la futur-propriété propriété CSS "rgba"

Pour mettre une couleur en CSS, on utilise la propriété rgb(). Bientôt la fonction rgba() sera utilisable. Le "a" est bien sûr le canal alpha, la transparence :

<div style="background-color: rgba(255, 0, 0, 0.5)">………</div>

Ici, la couleur sera rouge transparente.
Cette fonction n'est pas reconnue par Internet Explorer ni par Opera 9.x (fonctionne cependant avec Opera 10).

Ruser

J'explique :
On prend un <div> conteneur du texte et des images. Dedans, on place un div ouvert et refermé tout de suite. Vide. C'est lui qui permettre de rendre la transparence de fond, sans affecter le reste du texte. Le DIV vide sera étiré au bord du DIV conteneur mais derrière ce dernier.
Exemple :

<div style="position: relative; z-index: 10;">
   <div style="	background-color: #f00; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; opacity:0.2;"></div>
   ……
   ……
</div>

• Si le premier DIV possède un positionnement relatif, c'est pour mettre le z-index.
• Le div permettant la transparence possède le positionnement absolute et un collage à 0 px de chaque bord) pour qu'il recouvre le premier DIV et un z-index de -1 pour le mettre sous le premier.

Merci à seabust sur le forum pour cette astuce ! Ce document intitulé « Créer une DIV avec transparence » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.