Juglar

Transparencia de un elemento:

.elemento_semitransparente {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}

Los imprescindibles:
* opacity: Regla estándar válida en CSS3. Funciona en Firefox, Safari, y Opera.
* filter:alpha: Para que funcione en Internet Explorer.

Los “por si acaso”:
* -moz-opacity: Para antiguas versiones de Mozilla como Netscape.
* -khtml-opacity: Para antiguas versiones de Safari.

Los valores numéricos obviamente permiten el rango, según el caso, de 0 a 1, o de 0 a 100, para variar el nivel de transparencia.

Transparencia de un color:

.elemento_semitransparente {
background: rgba(200, 54, 54, 0.5);
}

Las 3 primeras cifras definen el color, y la cuarta el grado de transparencia. La principal diferencia con el método anterior es que así la propiedad de transparencia no se transmite a los elementos “hijo” (children). Funciona en Firefox3, Safari, y Google Chrome, y falla en Internet Explorer y Opera.

Para que funcione en IE:
<!--[if IE]>
<style type="text/css">
.elemento_semitransparente {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->

< ![endif]-->

En cualquiera de los casos, aunque te quede “chulo”, olvídate de validar.

CSS Transparency Settings for All Browsers | CSS-Tricks
RGBa Browser Support | CSS-Tricks