[Plan de la catégorie CSS]

Il est possible de rendre plus ou moins transparent une div grâce au CSS.
La norme CSS 3 ajoute la propriété opacity, mais elle n’est pas encore implémentée dans tous les navigateurs (ça vous étonne ?)

Utilisation

Afin de rendre transparent une div dans une grande majorité de navigateurs, vous pouvez utiliser le code suivant:

filter:alpha(opacity=30);    /* Fonctionne pour IE        */
-moz-opacity:.30;        /* La propriété de Mozilla    */
opacity:.30;            /* La propriété de CSS 3    */

Vous pouvez bien sur faire varier la transparence en modifiant la valeur.

Résultats par navigateur

J’ai testé les propriétés sur différents navigateurs, voici les résultats :

	filter:alpha()	-moz-opacity	opacity
IE 6	OUI	NON	NON
IE 7	OUI (*)	NON	NON
Firefox	NON	OUI	OUI
Google Chrome	NON	NON	OUI

* IE 7 a demandé l’exécution d’un contrôle Active X dû à ma configuration

Et en images :

IE6
IE7
Firefox
Google Chrome

Exemple(s)

Sur une div :

<div style="background-color :blue ; filter:alpha(opacity=30); -moz-opacity:.30; opacity:.30;width :100px ;height :50px ;margin:auto;">Transparence CSS sur un div</div>

Sur une image :

<div style="background-color :blue; filter:alpha(opacity=30); -moz-opacity:.30; opacity:.30; margin:auto;text-align:center;width:400px;"><img src=”/images/logo.png” alt=”logo”/> </div>

Dernière modification : 20-01-2009

	Comment mettre une couleur ou une image de fond sur un element en Css.
	Comment utiliser les marges en Css.
	Gestion de la police de caractères en Css.