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.
¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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
Te has dejado el de IE8
<code> -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";</code>
Saludos
Gracias Andrés, ahora lo añado 😉
jeje, cuidado que puedes tener problemas con adsense!
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.
Joer vaya fotito, y encima me molan las orientales….. madre mia….de que iba el post por cierto
¿Qué te hace pensar que es oriental?
Que buena la foto, incluso más que la información
Haré este cambio a ver si empiezo a ver las fotos así 😛
Gracias por el dato!
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.
Excelente… lo probé y funciona fantástico
Muchas gracias. El de Internet Explorer me ha ahorrado un rato de busqueda
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
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.
Gracias por el aporte, me sirvió de mucho en mi nueva web. 🙂
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?
Gracias por la foto y por la explicacion de transparencias.
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);