La transparence de couleur avec RGBa en CSS3 Le filtre Gradient pour IE
Détourner un filtre propriétaire d'IE
Cette astuce consiste à détourner un filtre propriétaire à Microsoft, le gradient filter (filter:progid:DXImageTransform.Microsoft.gradient pour les intimes), dont la fonction est de créer des dégradés de couleur d'arrière-plan sur Internet Explorer.
Ce filtre a pour avantage de prendre en compte la transparence de la couche Alpha dans ses valeurs. Il est donc possible de rendre le fond transparent en indiquant la même couleur pour le début et la fin du "dégradé".
La couleur est exprimée en hexadécimal, au format #AARRGGBB, où AA est la valeur hexadécimale de la transparence, RR la valeur de la couche rouge, GG la valeur de la couche verte, et BB la valeur de la couche bleue.
Par exemple, les styles CSS suivants vont appliquer une couleur bleue (0000ff) d'une transparence de 20% au bloc :
div {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000ff,endColorstr=#330000ff);
} A titre de pense-bête, voici une correspondance entre le pourcentage de transparence Alpha souhaité et la valeur correspondante en hexadécimal :
0% (transparent) -> #00 en hexadécimal
20% -> #33
50% -> #80
75% -> #C0
100% (opaque) -> #FF
Un commentaire conditionnel pour se limiter à IE
Bien entendu, pour éviter de gêner les bons élèves, nous allons nous appliquer à administrer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.
Le code HTML/CSS pourrait ressembler à celui-ci :
<style type="text/css">
.opacite {
width: 50%;
background-color: rgb(0, 0, 255); /* alternative solide */
background-color: rgba(0, 0, 255, 0.2);
}
</style>
<!--[if IE lte IE 8]>
<style type="text/css">
.opacite {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000ff,endColorstr=#330000ff);
zoom: 1;
}
</style>
<![endif]--> Le résultat fonctionne sur Chrome, Safari 4, Opera 10, Firefox 3, IE6, IE7, IE8, etc.