CSS además de permitir el manejo del formato de los textos en HTML brinda métodos para enriquecer la disposición visual del contenido, entre ellas la aplicación de transparencias. Aunque el manejo de las transparencias aun no es igual en todos los navegadores por lo cual incluiremos los métodos para obtener la máxima compatibilidad.
Como utilizar los estilos
Si queremos compatibilidad con todos los navegadores, incluso con las versiones antiguas de Mozilla (Netscape Navigator) o versiones anteriores de Safari la forma sería:
.alpha { opacity: 0.5; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; }
Donde se tiene que opacity es el más importantes pues es compatible con el actual estándar de CSS, filter es utilizado para Internet Explorer, -moz-opacity para versiones antiguas de Mozilla y -khtml-opacity para versiones anteriores a Safari 1.x.
Ahora este código lo podemos resumir obviando las versiones antiguas de Mozilla y Safari, con lo cual tendríamos.
.alpha { opacity: 0.5; filter:alpha(opacity=50); }
Ejemplo: imágenes Transparentes
Lo primero que hacemos es crear dos estilos uno para aplicar 75% y 25% de transparencia.
.alpha75 { opacity: 0.75; filter:alpha(opacity=75); } .alpha25 { opacity: 0.25; filter:alpha(opacity=25); }
Ahora incluimos las imágenes y le aplicamos los estilos recién creados.
<div> <img loading="lazy" src="iphone.jpg" width="48" height="108" /> </div> <div class="alpha75"> <img loading="lazy" src="iphone.jpg" width="48" height="108" /> </div> <div class="alpha25"> <img loading="lazy" src="iphone.jpg" width="48" height="108" /> </div>
Con lo cual obtenemos el resultado mostrado en img-alpha.html
Ejemplo: Fondo transparente
El siguiente ejemplo consiste en colocar una imágen como fondo y sobre el crear un bloque de texto que tenga transparencia.
.bg { width: 420px; height: 284px; background: url(imgbg.jpg); } .trans { background-color: #FFFFFF; opacity: 0.5; filter:alpha(opacity=50); margin: 16px; width: 250px; border: solid 2px #FFFFFF; } .trans p { margin: 5px; color: #000000; }
Luego creamos los elementos html y aplicamos los estilos recién creados, nótese que el estilo que tiene la transparencia es llamado .trans y los elementos dentro del mismo heredarán la transparencia.
<div class="bg"> <div class="trans"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div> </div>
Este ejemplo lo podemos ver funcionando en bg-alpha.html. Como pueden ver es sencillo de implementar y con un resultado muy vistoso.
Comentarios Total 5 comentarios
Publicado: 08/12/2008 1:40 am
Me encanta tu blog, a ver cuando le das un repaso a Ajax que con lo que publicas + Ajax se podrían hacer unas webs im-presionantes
Publicado: 10/02/2009 11:52 am
Esta de lujo! pero a mi no me jalan en IE6; es raro tus ejemplos se miran bien, pero los mios no sirven… sigo intentando.
Publicado: 24/03/2010 5:28 pm
hola, necesito saber como se hacen las transparencias pero con una modificacion… intente modificar tu codigo para poner la transparencia al centro de la pagina, pero aun no lo he logrado, espero que me puedas ayudar con esto, lo necesito para un proyecto que tengo en donde obligo al usuario a dar login al entrar a la pagina o en su caso registrarse… espero tu respuesta, gracias.
Publicado: 14/04/2010 10:46 am
[…] me blog.unijimpe.net traigo esta info interesante a la hora de […]
Publicado: 27/03/2012 6:56 am
Tengo una duda esencial…
Está genial lo de opacity… pero es CSS3… en CSS2.1 cómo se puede lograr el mismo efecto.
Hace tiempo vi una página (con una URL larga de narices) que tenía transparencias y pasaba el validador CSS2.1, la lástima es que no anoté en su día cual era y ahora me surge la inquietud.
Gracias.