Los colores rgba() en Internet Explorer

Las transparencias están de moda y con variantes, pueden usarse en todos los navegadores. Una de las nuevas posibilidades del CSS3 es el uso de "transparencias" en los colores y para eso existe una forma especial de escribir esos valores.

Un color dado, puede ser expresado en diferentes formatos; por ejemplo, el color rojo:

color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;

A estas posibilidades, se le sumaron dos más, el llamado rgba() (Red Green Blue Alpha):

color: rgba(255,0,0,1);

y el formato llamado hsla() (Hue Saturation Lightness Alpha)

color: hsla(0,100%,50%,1);

Si los usamos, todos se verán iguales porque son el mismo color pero los dos últimos son ignorados en Internet Explorer ya que, por ahora, no admite estos formatos.

Sin embargo, IE dispone de filtros que podemos usar para tratar de equiparar las cosas y con ellos, simular el formato rgba().

El filtro que debemos usar es gradient ya que, el color de inicio y color final, admiten un cuarto valor que es, justamente, el valor de alpha o sea, la transparencia. La propiedad tiene esta sintaxis:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#VALOR,endColorstr=#VALOR);

Normalmente, los valores que pondríamos son dos diferentes para que se creara una gradiente de colores pero, nada impide poner el mismo color en ambos; esto, lo mostraría todo rojo:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000,endColorstr=#FF0000);

Y, como acepta un cuarto valor hexadecimal (entre 00 y FF) que indica la transparencia, podríamos poner esto para que sea equivalente a un 50% de opacidad:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF0000,endColorstr=#80FF0000);

Supongamos un color cualquiera como #FF8000; podemos usar el mismo color con diferentes transparencias; por ejemplo, este es el color "normal":

background-color:rgba(255,128,0,1)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF8000,endColorstr=#FFFF8000);

y este es el mismo color con un 50% de transparencia:

background-color:rgba(255,128,0,0.5)
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF8000,endColorstr=#80FF8000);

Aquí vemos una serie de rectángulos que usan ese sistema, todos tienen el mismo color y lo que va variando es su opacidad:

Lo podemos aplicar como cualquier otro efecto aunque los filtros de IE están limitados a bloques, es decir, etiquetas que tengan una dimensión y no pueden usarse en etiquetas inline:

efecto onmouseover

<style>
a.demoRGBA {
background-color: #FFFF00; /* el color de fondo "normal" */
border: 5px solid #FF0000;
color: #00A0FF;
display: block;
margin: 0 auto;
font-size: 20px;
padding: 10px;
text-align: center;
width: 250px;
}
a.demoRGBA:hover {
color: #FFF;
/* el color de fondo transparente para IE */
background-color: transparent;
/* el color de fondo usando rgba() */
background-color: rgba(255, 255, 0, 0.5);
/* el filtro de IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFF00,endColorstr=#80FFFF00);
}
</style>

<a class="demoRGBA" href="#">efecto onmouseover</a>