Article mis à jour le : 05-05-2022
Comment gérer la transparence en CSSEn CSS, la gestion de la transparence peut se gérer de deux façons.
Pour les navigateurs modernes, il suffit d'utiliser l'attribut opacity, avec une valeur allant de 0 à 1, sur votre élément (div, image...):
#Header {opacity : 0.5}Sur les anciens navigateurs de type Internet Explorer ( version 8 et précédente) :
filter: alpha(opacity=50); Maintenant il y a une petite difficulté. Imaginons que vous ayez deux éléments, disons deux div superposées, et que vous souhaitiez que chacun ait sa propre opacité. Le souci, c'est que l'opacité n'est pas surchargable en utilisant l'attribut opacity.
Pour y remédier, il faut directement définir via l'attribut RGBA:
background: rgba(0, 0, 0, 0.5);