opacidad-css

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.



Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!