Transparencias en todos los navegadores mediante CSS

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 */ 
	}

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(3 votos, promedio: 4)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 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.

21 comentarios en “Transparencias en todos los navegadores mediante CSS”

  1. Pingback: Bitacoras.com

  2. Iba a comentar que ya había visto algo parecido en CSS Blog, pero no con esa foto. Se agradece, que hace que uno preste más atención al post xD

  3. Para los estrictos con la validación de los estándares, creo que las propiedades "opacity" no la cumplen. Lo tenía en el plugin de "sociable" y daba errores de CSS.

  4. Pingback: Lecturas recomendadas | Primer entrega

  5. Pingback: Transparencias con CSS | diarioTHC, recursos para webmasters, bloggers y diseñadores

  6. Hola, estoy aplicando las tranparencias a un menu desplegable. En internet explorer 8 me funciona una sola vez al pasar por arriba ya yadespués no vuelve a funcionar la tranparencia, obviamente solo si alcualizo la página. Qué puedo estar haciendo mal?

    Saludos y estaré muy agradecido si puedieran ayudarme.

  7. hola!
    la transparencia se la he aplicado al menú lateral y va muy bien.
    problema:
    al colocar el texto de mi menú, las letras también tienen aplicadas la transparencia,
    ¿alguna solución?
    gracias

  8. para aplicar la transparencia sin que afecte al texto usar:

    background: rgba (255,255,255, 0.7);

    donde las tres primeras cifras corresponden al color (en esta caso blanco) en formato rgb y el 0.7 al nivel de transparencia aplicada. los valores de transparencia van de 0 A 1.

    Espero les sea útil.

  9. está muy bien el post, pero yo no hago más que colocar el opacity y la tia con el tanga no aparece por ningun lado!! alquien me podría decir que ocurre?

  10. Ulysses Jimenez

    Nota: Si quieres aplicar el css a todas las versiones de IE, se tendra que usar la version para IE 8 primero y despues usar el otro filtro

    -ms-filter:»progid:DXImageTransform.Microsoft.Alpha(opacity=40)»;
    filter:alpha(opacity=40);

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido