Ultima revisión 15/10/2012

Transparencias en CSS3

Antes de CSS3, las transparencias sólo se podían hacer en Internet Explorer con la propiedad filter y en los demás con opacity. Esto era un poco caótico y encima funcionaba de aquella manera ya que tenía las limitaciones de aplicarse a todo el recipiente o contenedor.

Ejemplo

Prueba con transparencia mediante opacity

Prueba con transparencia mediante filter sólo aplicable a IE7 en inferiores

Prueba con transparencia mediante -ms-filter sólo aplicable a IE8

.transparencia1 { // para todos los navegadores incluyendo IE9+
    opacity: .5 !important;
    color: #283a64 !important;
}

.transparencia2 { // para IE5-7
    filter: alpha(opacity=50);
    color: #ffffff !important;
}

.transparencia3 { // para IE8
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    color: #ffffff !important;
}

Ahora todo es mucho más sencillo y estandar ya que con CSS3 podemos aplicar transparencias sólo a los fondos o background de la capa actual sin tocar ni el texto ni sus capas subyacentes.

.transparencia_background {
    background-color: rgba(153,153,153, 0.5);  
}

O establecer una transparencia al texto sin tocar el color de background.

.transparencia_texto {
    color: rgba(153,153,153, 0.5);  
}

Esto tiene una ventaja añadida y es que además ayuda o mejora el Cross Browsing