Transparencias en todos los navegadores mediante CSS

Publicado por Fernando el 23 Feb, 2009

transparencia

Una de las penurias de todo desarrollador web es obtener consistencia en la presentación de contenidos independientemente del navegador. Una de estas inconsistencias es el modo en que cada navegador gestiona las transparencias de imágenes y objetos.

Pues bien, si quieres aplicar transparencia a un elemento, independientemente del navegador, puedes conseguirlo añadiendo unas líneas de CSS al mismo:

elemento {
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, version anterior de safari */
	-moz-opacity: 0.5;       /* firefox, mozilla, netscape */
	opacity: 0.5;           /* safari, chrome, opera */
       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*internet explorer 8 - gracias Andres */ 
	}

elemento {

filter: alpha(opacity=50); /* internet explorer */

-khtml-opacity: 0.5; /* khtml, version anterior de safari */

-moz-opacity: 0.5; /* firefox, mozilla, netscape */

opacity: 0.5; /* safari, chrome, opera */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*internet explorer 8 - gracias Andres */

}

Por supuesto, debes acordarte de modificar el “elemento” por el que vayas a adaptar, y saber también que puedes jugar con los distintos niveles de opacidad hasta encontrar el que se ajuste al aspecto que quieres conseguir.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.