Ajouter des background avec transparences en CSS
Voici le code source pour pouvoir utilisé des éléments via CSS avec des background de couleur avec transparence.<style type="text/css">
.bg_transparent { background: rgba(255, 0, 0, 0.4); }
</style>
<!--[if IE]>
<style media="all" type="text/css">
/* format de couleur: hexadecimal 0xAARRGGBB format. AA alpha 00 à FF */
.bg_transparent { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FF0000,endColorstr=#66FF0000); }
</style>
<![endif]-->
<div class="bg_transparent">
<h1>Div avec Bg d'une couleur tranparente</h1>
<h2>Choix d'opacicité dans FF et autre : entre 0 et 1</h2>
<h2>Choix d'opacicité dans IE : entre 00 et FF</h2>
</div>
Le tout utilise une astuce pour IE qui ne prend pas en charge l'option CSS background: rgba pour IE 8 et IE 7. Et le remplace par l'option Gradiant qui permet de faire la transition entre 2 couleur et permet aussi la transparence. Comme on veux juste une couleur uniforme transparente pour IE on utilise GRADIANT avec la même couleur intitial et final.
Utilisation de la même transparence pour FF et IE, voici un tableau d'équivalence
| Opacité FF | Opacité IE | %opacité |
| 0 | 00 | 0% |
| 0.2 | 33 | 20% |
| 0.4 | 66 | 40% |
| 0.6 | 99 | 60% |
| 0.8 | CC | 80% |
| 1 | 00 | 100% |
Problème avec IE si aucune largeur de défini, pour que cela fonctionne sous IE il faut absolument spécifier une largeur en pixel ou en pourcentage de l'élément a background transfarent.