Cas général

Code:

.maDiv {
  background-color: rgb(RR, GG, BB);    /* alternative, au cas où */
  background-color: rgba(RR, GG, BB, A);
}

Vous devrez mettre le code rgb (Red, Green, Blue) de votre couleur, puis l'opacité (alpha) A, située entre 0 et 1 !
Cela permettra de fixer une couleur de fond plus ou moins transparente à vos éléments de classe maDiv. Cette propriété s'adapte bien entendu là où vous pouvez avoir de la couleur (là, à vous de jouer...).

On place auparavant l'alternative background-color: rgb(RR, GG, BB); au cas où le navigateur ne supporte pas l'alpha (ce qui est le cas d'Internet Explorer 8 et ses versions antérieures par exemple).

Le cas Internet Explorer

Internet Explorer, jusqu'à sa version 8 incluse, ne comprend pas cette définition de l'opacité. Pour rendre votre code compatible sous ce navigateur, il va falloir l'adapter un peu.

Pour cela, on utilise un code un petit peu barbare qui est en fait un filtre particulier (propriétaire : Microsoft) :

Code:

.maDiv {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AARRGGBB,endColorstr=#AARRGGBB);
}

Là encore, on retrouve le RGB, ainsi que l'alpha A. La différence, c'est qu'ici votre alpha doit s'exprimer en hexadécimal.

A savoir que 0% correspond à #00, et que 100% correspond à #FF. A vous de bidouiller pour obtenir l'opacité qui vous convient.

Intégration finale

Code:

<style type="text/css">
  .maDiv {
    background-color: rgb(RR, GG, BB); /* alternative au cas où l'opacité ne soit pas gérée */
    background-color: rgba(RR, GG, BB, A);
  }
</style>
<!--[if IE lte IE 8]>
  <style type="text/css">
    .maDiv {
      background:transparent;  /* propriétés supplémentaires qui assurent une certaine compatibilité */
      zoom: 1;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#AARRGGBB,endColorstr=#AARRGGBB);
    }
  </style>
<![endif]-->

Vous remarquerez la présence d'un commentaire conditionnel, qui permet au second style de n'être pris en compte que par les navigateurs qui nous intéressent : IE 8 et moins.

Outils complémentaires et solution annexe

Vous trouverez ici un convertisseur rgb-hexadécimal qui vous aidera certainement à définir vos couleurs : http://www.proftnj.com/RGB3.htm

Notez également qu'ils existe une autre alternative, celle d'utiliser une image de fond en PNG transparent. Notez cependant que cette transparence n'est pas gérée pour IE 6 et moins (mais IE 6 a fait son temps depuis 2001 et n'a plus vraiment sa place comme navigateur).