Cada navegador comparte un modo distinto para aplicar transparencia a un elemento, así que debemos conocer todos los tipos de transparencia existentes en CSS para que se apliquen en todos los navegadores por igual.
Serían estos:
filter:alpha(opacity=50); /* Internet Explorer */ -moz-opacity:0.5; /* Firefox, Netscape, Mozilla */ -khtml-opacity: 0.5; /* Khtml, version anterior de Safari */ opacity: 0.5; /*Opera, Safari, Google Chrome */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*Internet Explorer 8 Gracias a Andres de AyudaWordpress */
Y si ahora deseamos incluirlo en una clase y aplicarlo a un div para que tenga opacidad al 50%, debería ser así, por ejemplo:
.opacidad
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
El código HTML:
<div class="opacidad"> Tu texto </div>
Obviamente se puede cambiar los valores de 0 a 1 (en este caso está por defecto 0.5), menos en la primera línea de filter:alpha que se usa de 0 a 100. Aunque a los validadores no les gusta a veces, esta es la única forma de aplicar transparencia por CSS. Para poder validarlo deberíamos usar Javascript.
