La propriété "opacity" est très simple et vous l'avez d'ailleurs utilisé sous une autre forme via les valeurs rgba.

.full {
  opacity:1;
}

.middle{
  opacity:0.5;
}

.invisible{
 opacity : 0;
}

Dans cet exemple, .full sera complètement opaque (valeur par défaut), middle fera en sorte que l'élément sera transparent à 50% et invisible sera totalement transparent.

Notez donc que lorsque la transparence sera affectée, il s'agira du contenu en arrière plan qui sera visible. Cela peut paraître évident mais réalisez néanmoins qu'une opacité de 50% d'une couleur blanc sur rouge ne sera pas la même que blanc sur noir, ou même blanc sur une image.

Enfin, pour rendre un élément invisible, vous disposez de plusieurs options :

• Display:none
• Visibility:hidden;
• Opacity:0;

Display:none va complètement retirer un élément et donc, d'un point de vue visuel, retirer également la hauteur, largeur, marges de cet élément. Opacity:0 va juste le rendre invisible et ne pas affecter les tailles. Visibility:hidden est similaire à opacity mais ne peut être utilisé via des transitions (voir chapitre suivant)