Il y a deux manières de gérer l'opacité et la transparence en langage CSS, les deux ont leurs avantages et leurs inconvénients.
La première méthode consiste à utiliser la propriété opacity, tandis que la seconde consiste à utiliser la propriété RGBa.
La transparence avec opacity
Comme vous l'aurez compris, la propriété opacity vous permet de gérer l'opacité.
Pour une valeur de 1 (maximum)l'élément sera entièrement opaque, donc sans transparence. Pour une valeur de 0 (minimum) l'élément sera complètement transparent, ainsi on ne verra rien.
Pour avoir une figure un peu transparente il faut prendre une valeur entre 0 et 1 : si je prend 0.4, j'ai un élément transparent à 40%.
Voici un exemple d'utilisation :
p { background-color: black, opacity: 0.8; }
La transparence avec RGBa
La propriété RGBa ressemble quasiment en tous points à la propriété RGB, sauf que l'on rajoute un canal après rouge-vert-bleu : le canal alpha.
Vous vous demandez sans doute à quoi ça sert... et bien si vous voulez uniquement que votre fond soit transparent, vous ne pouvez pas utiliser la propriété opacity car elle rend le fond et TOUT ce qu'il y a dans la balise concerné en transparent.
Par contre RGBa ne rend que le fond transparent, pas mal hein ?
Voici comment on utilize la propriété RGBa :
body { background-color: RGBa(0, 255, 0, 0.5); }
Le dernier canal en question est le canal alpha, qui gère l'opacité. Cela fonctionne exactement de la même manière que pour la propriété opacity.
En l'occurrence on a donc un fond vert à moitié transparent.