La meilleur solution à faire les éléments semi-transparents (p.e. bordure, texte), il faut utiliser le format de couleurs en RVB (rouge/vert/bleu - RGB en anglais).
div {
border: 1px solid rgba(255, 0, 0, .5);
}
div - remplacez avec l'élément qui contient la bordure, p.e. #body
0.5 - valeur d'alpha : l'opacité de 50%, si vous voulez 25% du transparence, marquez 0.25, etc.
Pour connaître les numéros RVB, cherchez les trois chiffres
ici !
Le problème c'est que les anciens navigateurs (Mozilla Firefox 2 et avant, IE 8 et avant, Safari 2 et avant, Opera 9 et avant, Netscape tous les version) ne reconnaissent pas ce code (rgba avec valeur d'alpha), donc ils ne vont rien afficher. Pour éviter du manque de l'élément, on doit ajouter un code sans :
div {
border: 1px solid rgb(127, 0, 0);
border: 1px solid rgba(255, 0, 0, .5);
}
Dans ce cas les navigateurs moins performants affichent les éléments sans opacité et les navigateurs plus performants affichent les éléments semi-transparent.
