Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

Gestion de la transparence en CSS

Article posté le 12-06-2016 dans la catégorie HTML et CSS

En 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);

Tweet
comments powered by Disqus