CSS3: background color con transparencia

Podemos dar una determinada opacidad de color a un background utilizando el formato RGBa de CSS3, que es compatible con los navegadores modernos (chrome, firefox 3+, safari 3+, Opera 10+, IE9).

En el siguiente ejemplo vamos a dar una opacidad del 0.5% (equivale a un 50%) a un color sólido negro (0, 0, 0). Los 3 primeros valores corresponden al color en RGB, y el último valor indica la transparencia:

.fondo {
    /* Para Navegadores que no soportan RGBa mostramos color sólido sin transparencia */
    background: rgb(0, 0, 0);
    /* Para navegadores que soportan RGBa mostramos el color sólido con un 50% de opacidad */
    background: rgba(0, 0, 0, 0.5);
}

Para IE8 o inferiores podemos utilizar el script php «rgba.php» de este modo:

.fondo {
    /* Para IE8 o inferior */
    background: url('rgba.php/rgba(0, 0, 0, 0.5)');
    background: rgba(0, 0, 0, 0.5);
}