Como hacer transparencias con Opacity en CSS3
Css | Escrito por Ezequiel M. | Junio - 15 - 2009
CSS3 promete solucionar muchos de los problemas y necesidades de los maquetadores web. Todavía hay incompatibilidades con CSS2.1 en algunos navegadores, pero esto no desmerece estudiar y practicar sobre esta nueva promesa.
La propiedad Opacity permite hacer transparencias con valores Alpha que van del 0.0 al 1.0, esto equivale a 0% y 100%. Muy facil de usar solo hay que poner la propiedad y su valor, esta propiedad funciona correctamente en Firefox 3+ y no da señales de vida en IE.
Para este ejemplo use dos divs, el primero sin transparencia y el segundo con una transparencia del 50%.
Código CSS:
.div{
position:absolute;/*Para que no choquen los divs*/
width:200px;
height:200px;
top:60px;
left:150px;
background-color:#FFCC00;
}
.div2 {
width:200px;
height:200px;
opacity:0.5; /*Opacidad de 50%*/
background-color:#990000;
}
Código XTML:
Div sin TransparenciaDiv Transparente
Resultado
Interesante tema el de las transparencias con CSS. Aunque no se me ocurren muchas utilidades ahora mismo, seguro que tiene una infinidad.
Bunos estos tips de CSS.
Hasta pronto!
Comment por Jack Bach el 23 Julio 2009 a las 12:29Si, CSS3 se viene con todo porque promete ser muy versatil reduciendo el uso de imágenes a la hora de diseñar. Saludos!!!
Comment por Willowman el 23 Julio 2009 a las 19:54para IE se puede usar la propiedad ‘filter’ y como valor ‘alpha(opacity=[0-100])’
quedaria asi:
.div2 {
Comment por JuanM. el 21 Febrero 2010 a las 13:43width:200px;
height:200px;
opacity:0.5; /*Opacidad de 50%*/
filter:alpha(opacity=50); /*Opacidad de 50% para IE 6,7 y 8*/
background-color:#990000;
}