CSS : Gestion de la transparence
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 ci-dessous.
Il prend en compte la propriété standard (CSS 3) ainsi que celle spécifique pour IE.
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>
Posté le 20-01-2009
Articles susceptibles de vous intéresser