Gérer la transparence des images en CSS

Abonnez vous au flux RSS de ce blog et restez informé en continue !

Dans la conception de votre nouveau projet web vous avez besoin de mettre en place un effet de transparence. Pour mettre en place cet effet, vous avez deux possibilités : utiliser une image intégrant la transparence ou bien utiliser CSS. La mise en place de la seconde solution semble être la meilleure car vous pouvez régler le niveau de transparence plus facilement, ce qui n’est pas le cas avec une image pré-produite.

La mise en place de cette transparence en CSS s’effectue grâce à la propriété Microsoft filter s’appliquant à un élément HTML.

Syntaxe :

filter:alpha(opacity=50);
/* Réduit l'opacité à 50% */

Seulement voilà, cette propriété n’est reconnue que par Internet Explorer et la valeur de la transparence doit être comprise entre 0 et 100. Il faut donc compléter cette prise en compte pour Firefox, Safari et les recommandations W3C. Pour ce faire, il existe d’autres propriétés à utiliser :

• Pour Firefox : -moz-opacity:XX;   (0<XX<1)
• Pour Safari : -khtml-opacity:XX;   (0<XX<1)
• Pour W3C : opacity:XX;   (0<XX<1)

XX est la valeur de la transparence à utiliser.

Pour illustrer cette mise en place de la transparence, nous allons mettre en place un CSS prenant en charge les différents cas de figure. Voici la classe monbloc :

Code CSS

.monbloc {
    background : #010415;
    filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}

Code HTML

<div class="monbloc">
<p>Lorem ipsum eam odio qualisque efficiantur cu, propriae...</p>
</div>

Il ne vous restera plus qu’à régler le degré de transparence à votre convenance et rien ne vous empêche de mettre en place un effet différent suivant le navigateur qui ouvrira le site.

Effet transparence sous IE8